A version of implementing a "Read more" button in collection descriptions

readmore-truncate.liquid

<!--
  This is assuming that the paragraphs you want to truncate are enclosed in a span tag with ID="more" 
  (e.g. Less collection description here... <span id="more">More collection description here...</span>)
-->

<!-- CSS -->
<style>
#more {
  display: none;
}
</style>

<!-- Placed under the collection description -->
<button class="read-more-btn" onclick="readMore()">Read more</button>


<!-- Placed at the end of the document (before schema) -->
<script type="text/javascript">
  let desc = `{{ collection.description }}`;
  let moreBtn = document.querySelector('.read-more-btn');
  let moreTxt = document.querySelector('#more');

  //check if span tag for more section is present
  if(desc.includes('<span id="more">')){
    moreBtn.style.display = 'block';
  } else {
    moreBtn.style.display = 'none';
  }

  function readMore() {
    if(moreTxt.style.display === "inline"){
      moreBtn.innerHTML = "Read more";
      moreTxt.style.display = "none";
    } else {
      moreBtn.innerHTML = "Read less";
      moreTxt.style.display = "inline";
    }
  }
</script>