Coder Wrap provides free to use snippets

* {
 box-sizing: border-box;
}

body {
 margin: 0px;
 font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 background-color: #f0f7ff;
}

img {
 display: block;
 max-width: 100%;
 height: auto;
}

.wrapper {
 text-align: center;
 padding: 35px 0;
}

.list-group {
 max-width: 1000px;
 margin: auto;
 width: 100%;
 display: flex;
 flex-flow: row wrap;
}

.list-group .list-item {
 width: calc(50% - 30px);
 margin: 15px;
 background-color: #fcffff;
 min-height: 200px;
 font-size: 16px;
 border: #ccc 1px solid;
 opacity: 0;
 transition: opacity 0.5s ease;
 text-align: left;
 box-shadow: 0px 3px 14px -5px rgba(0, 0, 0, 0.3);
 -webkit-box-shadow: 0px 3px 14px -5px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0px 3px 14px -5px rgba(0, 0, 0, 0.3);
}

.list-group .list-item .item-title {
 font-size: 20px;
 padding: 20px 15px 10px 15px;
 display: inline-block;
 width: 100%;
 font-weight: 600;
}

.list-group .list-item p {
 padding: 0px 15px 20px 15px;
 margin: 0px;
}

.showmore-btn {
 font-size: 16px;
 font-weight: 700;
 padding: 12px 20px;
 line-height: normal;
 border-radius: 10px;
 letter-spacing: 1px;
 color: #212121;
 border: 2px solid #212121;
 text-align: center;
 cursor: pointer;
 color: #000;
 background-color: #fff;
 margin: 20px auto;
}

@media(max-width:767px) {
 .list-group .list-item {
  width: calc(100% - 30px);
  margin: 15px;
 }

}

document.addEventListener("DOMContentLoaded", function() {
  var listItems = document.querySelectorAll(".list-group .list-item");
  var numToShow = 4;
  var button = document.getElementById("showMore");
  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";
    }
  });

  // 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);
  }
});