Accordion - LEEDS.GOV.UK Design System

Back to components

The number of panels should be small, for example: less than 10.

Example

Here is the second panel of content.

list item one
list item two
list item three

Here is the third panel of content.

HTML Snippet for accordion

<div class="accordion"
    data-aria-accordion="true"
    data-multi="true"
    data-default="none">

    <h3 class="accordion__heading">
        Heading 1
    </h3>
    <div class="accordion__panel">
        <p>
            Here is the first panel of content.
        </p>
    </div>

    <h3 class="accordion__heading">
        Heading 2
    </h3>
    <div class="accordion__panel">
        <p>
            Here is the second panel of content.
        </p>
    </div>

    <h3 class="accordion__heading">
        Heading 3
    </h3>
    <div class="accordion__panel">
        <p>
            Here is the third panel of content.
        </p>
    </div>
</div>