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

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