Why is my 'read more' button creating duplicate text on category pages?

Niccolò8
Shopify Partner
33 0 2

Hey folks,

here we are again!!

 

I've insert this code to create "read more" and "read less" button on all my category pages but, I don't know why my text become duplicate.

Please can you check my code and let me know where I wrong?

Thank you so much!!

{% assign collection_strip = collection.description | strip %}
{% if collection_strip != "" %}
{% assign paragraphs = collection.description | newline_to_br | split: '<br />'%}
<p>{{paragraphs}}</p>
<span id="more" style="display: none;">
  {% assign len = paragraphs | size %} {{paragraphs | slice: 2, len}}
</span>
<div style="text-align: center">
  <u><button class="btn  secondary-button" onclick="readMore()" id="myBtn">Read more...</a></button></u>
</div>
<script>
  function readMore() {
    var moreText = document.getElementById("more");
    var btnText = document.getElementById("myBtn");
    if (more.style.display !== "none") {
      btnText.innerHTML = "Read more...";
      moreText.style.display = "none";
    } else {
      btnText.innerHTML = "...Read less";
      moreText.style.display = "inline";
    }
  }
</script>
{% endif %}
Niccolò
Replies 2 (2)

cringe_studio
Shopify Expert
14 3 0

Hi @Niccolò8 ,
your code seems to be fine.

Could you please provide Shopify store URL in order to reproduce the issue?

Thanks,
Simone

Was your question answered? Mark it as an Accepted Solution
If your question is Shopify, the answer is c̶r̶i̶n̶g̶e̶.
For enquiries: cringe.studio
Niccolò8
Shopify Partner
33 0 2

Hi @cringe_studio ,

thank you so much for your reply.

 

I've fix the issu! 

 

Thank you so much again!

Niccolò