Accordion component

The accordion component can be used to create panels that expand and collapse.

These are preferable to horizontal tabs, which aren't usually suitable for small screen devices.

Example markup

<div class="scc-accordion">
    <button class="scc-accordion__title">Title</button>
    <div class="scc-accordion__content">
        <p>Content here...</p>
    </div>
</div>

Example output

Use of the accordion component will require the relevant JavaScript bundle to be included in the page template. Please request this from Web and Digital Services team, as it is not included by default.