Truncating collection description text in shopify

See more:

Javascript

HTML

I am trying to add "Read more" and "Read less" buttons to collection descriptions for my Shopify store how can I add Html with liquid conditions? Currently,
{{ collection.description }} is the only thing on collection.description template.

What I have tried:

The HTML is working perfectly on the storefront but I want to add HTML in the theme template with liquid conditions, here is the code:

...

<p>text before Read More<span id="dots">...</span><span id="more"> the remaining 
description</span></p>
<button id="myBtn" onclick="myFunction()">Read more</button>


<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}

</script>

...