@ospr I realize this answer is super late, but well, I just saw it. The problem with your above html is that <p class="read-more-target" should actually read <div class="read-more-target" because the <p> is for paragraphs only - meaning that your unordered list and headers throw an error. By making the "read-more-target" its own element, you avoid this problem. Hope it helps! P.S. - Don't forget to close it out with </div> instead of the </p> !
@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!