Accordion

An accordion hides or reveals additional content when clicked on.

Expand all / Collapse all button

There is an optional, custom button for Accordion blocks that can either expand or collapse all accordion panels on a page. It can be implemented with the code snippet below using a Custom HTML block. This button should only be used once on any given page, and preferably above the first Accordion block on the page.

Second accordion block

Code

<div class="flex justify-end mx-auto" style="max-width:900px;">
  <button type="button" class="toggle-all btn btn-sm is-style-secondary mr-0 default-transition">
    Expand all
  </button>
</div>