Add collapsible tab/ show more to collection description

[nchantu]

So I just started using Shopify and have been stuck on this problem for the last few days. I'm aware that I posted a similar question yesterday but I've asked a moderator to delete it since I believe this formulating below is more explanatory of the issue.

I'm using Dawn theme, and have very limited knowledge in coding. Only super-basic JS experience. 

So I got one main concern which I desperately been searching answers for, and that  is:

What I want to do is add a "show more button" / collapsible tab to my collection descriptions, preferably by default if text contains a certain amount of letters. I'm guessing that i need to change some code in the file "main-collection-banner.liquid". 

If someone could provide a helping hand i would be super grateful.

Then I've got another "extra follow-up" question. I think i would be able to figure this one out myself but if anyone have got the possibility to answer this as well I would really appreciate it: 

I want the collection banner to be like the image-banner.liquid, but also include the collection description beneath the image. I've kinda solved it by simply changing banner type in the collection.json  - template, but that excludes the collection description.

If there is no relatively simple solution for this I'm aware that I just can add a rich text beneath instead, and copy paste the desc. 

[nchantu · Accepted solution]

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-coll...

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> 

[Steve791]

Thanks works great!

[JustJazato]

This worked out perfect! Thanks!