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>

...