Coder Wrap provides free to use snippets

* {
 box-sizing: border-box;
}

body {
 margin: 0px;
}

.main h2 {
 font-family: system-ui;
 font-size: 30px;
 text-align: center;
 margin: 40px 0px;
}

.listbox {
 max-width: 1200px;
 margin: auto;
 width: 100%;
 font-family: system-ui;
 display: flex;
 flex-flow: row wrap;
}

.listbox .item {
 width: calc(33.33% - 20px);
 margin: 10px;
 border: #e1e1e1 1px solid;
 padding: 20px;
 box-shadow: #dbdbdb 0px 0px 8px;
 transition: 0.5s all;
}

.listbox .item h4 {
 margin: 0px 0px 8px 0px;
 font-size: 20px;
}

.listbox .item p {
 margin: 0px;
}

.item .readmore-btn {
 border: #ccc 1px solid;
 padding: 5px 10px;
 line-height: normal;
 text-decoration: none;
 margin-top: 15px;
 font-weight: 700;
 font-size: 14px;
 border-radius: 4px;
 display: inline-block;
 color: #000;
 cursor: pointer;
}

.btns-group {
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 align-content: center;
 margin: 30px 0px;
}

#showLess {
 display: none;
}

.viewporoduct {
 font-family: system-ui;
 font-size: 16px;
 padding: 8px 20px;
 border: #000 2px solid;
 color: #000;
 cursor: pointer;
}

.viewporoduct:hover {
 background-color: #000;
 color: #fff;
}

@media(max-width:992px) {
 .listbox .item {
  width: calc(50% - 10px);
  margin: 5px;
  padding: 10px;
  font-size: 14px;
 }

 .listbox .item h4 {
  font-size: 15px;
 }

}

document.addEventListener("DOMContentLoaded", function() {
var listItems = document.querySelectorAll(".listbox .item");
var numToShow = 3;
var button = document.getElementById("showMore");
var showLess = document.getElementById("showLess");
var numInList = listItems.length;

// Hide all list items
for (var i = 0; i < listItems.length; i++) {
listItems[i].style.display = "none";
}

// Show the first batch of list items with a fade-in effect
for (var i = 0; i < numToShow; i++) {
if (listItems[i]) {
  fadeIn(listItems[i]);
}
}

// Show the 'showMore' button if there are more items to display
if (numInList > numToShow) {
button.style.display = "block";
}

button.addEventListener("click", function() {
var showing = 0;

// Find the number of currently visible items
for (var i = 0; i < listItems.length; i++) {
  if (listItems[i].style.display === "block") {
    showing++;
  }
}

// Show the next batch of items with a fade-in effect
for (var i = showing; i < showing + numToShow; i++) {
  if (listItems[i]) {
    fadeIn(listItems[i]);
  }
}

// Hide the 'showMore' button if all items have been shown
if (showing + numToShow >= numInList) {
  button.style.display = "none";
  showLess.style.display = "block";
}
});

// Function to fade in an element
function fadeIn(element) {
var opacity = 0;
element.style.display = "block";

var fadeInterval = setInterval(function() {
  if (opacity < 1) {
    opacity += 0.1;
    element.style.opacity = opacity;
  } else {
    clearInterval(fadeInterval);
  }
}, 50);
}

showLess.addEventListener("click", function() {
for (var i = 0; i < listItems.length; i++) {
if (i < numToShow) {
  listItems[i].style.display = "block";
  fadeIn(listItems[i]); // Apply fade-in effect if needed
} else {
  listItems[i].style.display = "none";
}
}
button.style.display = "block";
showLess.style.display = "none";
const bestSellerSection = document.querySelector('#listbox');
const offset = 200;
const scrollTo = bestSellerSection.offsetTop + offset;

window.scrollTo({
top: scrollTo,
behavior: 'smooth'
});
});
});