I am trying to add "Read more" and "Read less" buttons to collection descriptions on the Shopify store how can I add Html with liquid conditions? Currently, {{ collection.description }} is the only thing in collection.description template. The HTML is working perfectly on the storefront but how can I add HTML with liquid objects?

...

<p>text before Read More<span id="dots">...</span><span id="more">&nbsp;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>

...