Add Read More & Read Less Button on Collection Description

section-collection.liquid

 {% if collection.description != blank %}
    <div class="collection--description">
      {% capture readmore %}
          <div id="truncated">{{ collection.description | strip_html | 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>
      {% endcapture %}
      {{ readmore }}
    </div>
  {% endif %}

theme.liquid

<!--   Custom jQuery for colllection page  -->
    {% if template.name == 'collection' %}
      <script type="text/javascript">
        jQuery('.read-more-collection').click(function(){
        if(jQuery('#truncated').is(":visible")){
            jQuery('#truncated').hide();
            jQuery('#fullDescription').show();
            }
        else{
            jQuery('#truncated').show();
            jQuery('#fullDescription').hide();
        }
        });
      </script>
    {% endif %}