Details
Traditionally if you wanted to create collapsible panels in a webpage, you always had to turn towards something like jQuery or Flash (now obsolete). Things have now changed, in that HTML5 has given us the details tag. You can use these tags (in combination with 'summary' tags) to denote sections of page content you want to allow an end user to open and close on demand. If you don't care for jazzy animation effects or panels closing when the next one is clicked, then this could offer you a perfectly acceptable solution. Web browser support and accessibility is excellent. You have extensive possibilities to enhance these toggles further using CSS or Javascript code. Every part of the toggle can be edited using short text and long text elements. Putting this HTML & PHP code inside a loop element would allow website authors to add, edit, delete or reorder multiple toggles.
Example
Toggle Heading One
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, rerum. Veritatis repellendus et ipsa earum at optio facere? Distinctio porro impedit atque illum ex iusto delectus neque, necessitatibus ipsa eveniet?
Toggle Heading Two
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam nostrum, quam sint quasi officia pariatur rerum quo architecto facilis non, tenetur excepturi at suscipit itaque possimus, adipisci veritatis error enim.
Toggle Heading Three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto voluptatibus placeat quidem? Rem, alias harum tenetur nisi nulla eum minus vitae voluptatum, temporibus illo modi delectus a repudiandae necessitatibus quisquam!
Toggle Heading Four
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis temporibus totam rerum saepe officia quaerat sunt, laboriosam sed quibusdam itaque aliquam dolores magni natus dolore assumenda! Molestias eum ratione dolorem?
Toggle Heading Five
Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi beatae libero accusantium facere, ipsam reiciendis dicta ea quae sapiente expedita dolor? Asperiores aspernatur ad tempora quisquam, nemo qui exercitationem excepturi!
HTML & PHP
<details>
<summary>
<?php webyep_shortText("Toggle Heading", false, 550, 240); // WebYepV2 ?>
</summary>
<div>
<?php webyep_longText("Toggle Content", false, 600, 400); // WebYepV2 ?>
</div>
</details>
CSS
Javascript