https://open.berkeley.edu/guides/site-builders-guide/edit-html-page/expandcollapse-content
From above link:
Site builders who are comfortable editing HTML directly can add expanding/collapsing (accordion) content sections (the expand/collapse functionality is used on this very page!) to any content page or text widget.
Once you have inserted an expanding/collapsing section, you will be able to edit it using the WYSIWYG.
Each collapsible content chunk must have a container div around the whole chunk, a heading that serves as the controller, and a target div that surrounds the content that you want to expand/collapse. You must use the correct tags and class names for each item, otherwise the expand/collapse won’t work.
- For the container, use a div with class="openberkeley-collapsible-container"
- For the controller, use a heading (h2, h3, h4, or h5) with class="openberkeley-collapsible-controller"
- For the target content, use a div with class="openberkeley-collapsible-target"
Copy and paste the below sample code into your HTML editing window. You can add this text even if there is already content/HTML in the window, just take care to copy and paste the sample code in the correct place.
In the below sample code, replace the text in the <h2> (the controller heading) tag and the <p> (paragraph target content) tag with your expand/collapse text.
-----
<div class="openberkeley-collapsible-container">
<h2 class="openberkeley-collapsible-controller">Line of collapsible text</h2>
<div class="openberkeley-collapsible-target">
<p>In hac habitasse platea dictumst. Suspendisse dictum, velit vel vehicula gravida,
turpis nulla dignissim nibh, a tristique enim dui vestibulum enim. Duis cursus
euismod diam vitae gravida. Etiam a purus lorem.</p>
</div>
</div>
<div class="openberkeley-collapsible-container">
<h2 class="openberkeley-collapsible-controller">Another line of collapsible text</h2>
<div class="openberkeley-collapsible-target">
<p>Here is another paragraph that will expand. It can be long or short. You can add
any formatting and layout you want to a collapsible item. For example:</p>
<h3>Here is a subheading</h3>
<p>More text.</p>
<table>
<tbody>
<tr><th>Table header</th><th>Table header 2</th></tr>
<tr>
<td>Content of table</td>
<td>More content of table</td>
</tr>
</tbody>
</table>
</div>
</div>
<h2>No longer expanding!</h2>
<p>This stuff is just regular.</p>
---
When you are done, click Update. You will see your changes reflected in the WYSIWYG editor.-----------------------
====
Each controller and target will be displayed in the editor with a dashed or dotted border. These borders will not be displayed when you view the saved page. Once you have created a collapsible content chunk in the HTML popup, the borders will help you edit your content later without needing to open the HTML view.
When you visit the page, all content chunks start off collapsed. Click the controller heading to expand. The expand/collapse function has been tested for accessibility, and works well for keyboard-only users and screenreader users.
===============
If you want, you can add links to expand and collapse all of the items at once. Open up the HTML editor and paste this code just before your first collapsible item.
<div id="openberkeley-expand-all"><a class="openberkeley-collapsible-collapse" href="#openberkeley-expand-all">collapse all</a> <a class="openberkeley-collapsible-expand" href="#openberkeley-expand-all">expand all</a></div>
There can only be one set of expand all/collapse all links per page.
Topics
