Add collapsible tab/ show more to collection description

Technical Q&A
2

Finally found a solution thanks to this legend @Justin-Smith answers in this thread: https://community.shopify.com/c/shopify-design/help-requested-to-add-quot-read-more-quot-and-to-collection/td-p/376239

In main-collection-banner.liquid file, i replaced

{{ collection.description }}

with:

<div id="truncated">{{ collection.description | truncatewords: 10, "... <a class='read-more-collection' data-no-instant>Read More</a>" }}</div>
<div id="fullDescription" style="display: none">{{ collection.description | append: " <a class='read-more-collection' data-no-instant>Read Less</a>" }}</div>

Then added this at the bottom, right before the schema starts:

<style>
  .read-more-collection:hover{cursor:pointer}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
  var jq224 = jQuery.noConflict(true);
  jq224('.read-more-collection').on('click', function(e){
    e.preventDefault();
    if (!jq224('#fullDescription').is(':visible')){
      jq224('#truncated').fadeOut(300, function(){ 
        jq224('#fullDescription').fadeIn(500);
      });
    }else{
      jq224('#fullDescription').fadeOut(300, function(){ 
        jq224('#truncated').fadeIn(500);
      });
    }
  });
</script>