Show Read More/Read Less Button on content with Overlay

1. Add a class text or description: zaib-readmore
2. Add a code or html block under it and paste this code:

<style>
.zaib-readmore{
  position: relative;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.zaib-readmore.limited{
  max-height: 320px;
}
/* Stronger fade overlay */
.zaib-readmore.limited::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:220px;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.7) 60%,
    rgba(255,255,255,1) 100%
  );
  pointer-events:none;
}
.zaib-readmore.expanded{
  max-height:none;
}
.zaib-readmore.expanded::after{
  display:none;
}
/* LEFT aligned button */
.zaib-btn-wrap{
  text-align:left;
  margin-top: 0px;
}
.zaib-btn{
  display:inline-block;
  padding:8px 18px;
  background:#222;
  color:#fff;
  border:0;
  cursor:pointer;
  font-size:14px;
  transition:background .25s ease;
}
.zaib-btn:hover{
  background:#000;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
  var VISIBLE_HEIGHT = 320;
  document.querySelectorAll(".zaib-readmore").forEach(function(desc){
    requestAnimationFrame(function(){
      if(desc.scrollHeight <= VISIBLE_HEIGHT + 10){
        return; // Don't add button if content is short
      }
      desc.classList.add("limited");
      // Create button wrapper
      var btnWrap = document.createElement("div");
      btnWrap.className = "zaib-btn-wrap";
      var btn = document.createElement("button");
      btn.className = "zaib-btn";
      btn.textContent = "Show more";
      btnWrap.appendChild(btn);
      desc.after(btnWrap);
      btn.addEventListener("click", function(){
        var expanded = desc.classList.toggle("expanded");
        if(expanded){
          desc.classList.remove("limited");
          btn.textContent = "Show less";
        }else{
          desc.classList.add("limited");
          btn.textContent = "Show more";
          // Smooth scroll back up when collapsing
          var rect = desc.getBoundingClientRect();
          if(rect.top < 0){
            window.scrollBy({
              top: rect.top - 20,
              behavior: "smooth"
            });
          }
        }
      });
    });
  });
});
</script>