Created a "Read More" Button to expand/collapse text but I can only do one working one per page and I want 10 per page.

I was able to get a working 'read more' button but I'm unable to have more than one of them functioning on the page, I need 10 of them.

Here is the link to the page I'm working on: http://voltcult.com/best-albums-of-2017/#/101/

Here is the post I got the code from: https://answers.squarespace.com/questions/139747/creating-a-collapsible-markdown-on-one-page.html

Let me know if you can figure out why I can't get more than one working.

All The Best,Luke

@llabenne ,

I encountered this same problem, but it should be an easy fix. So this is what we are working with:

<div class="show-hide">
  <input type="checkbox" class="read-more-state" id="visible" />
  <div class="read-more-wrap">
    <p>Visible Text</p>
    <p class="read-more-target">Hidden Text</p>
  </div>
  <label for="visible" class="read-more-trigger"></label>
</div>

What's happening is the "id=visible" is being used across all your triggers, therefore when for="visible" is triggered it will default to the 1st box created. All we need to do is change the id= "whateveryouwant" and for="thesamewhateveryouwant" and proceed to create unique id's and for= across all code boxes.

Hope this helps!