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.
