Accordion

An accordion is a list of collapsed content items. A user can expand any item in the list to view its contents.

Open this example in a new window

Sample HTML

<div class="ds_accordion" data-module="ds-accordion">
    <button data-accordion="accordion-open-all" type="button" class="ds_link  ds_accordion__open-all  js-open-all">Open all <span class="visually-hidden">sections</span></button>

    <div class="ds_accordion-item">
        <input type="checkbox" class="visually-hidden  ds_accordion-item__control" id="panel-1" aria-labelledby="panel-1-heading" />
        <div class="ds_accordion-item__header">
            <h3 id="panel-1-heading" class="ds_accordion-item__title">
                Healthcare for veterans
            </h3>
            <span class="ds_accordion-item__indicator"></span>
            <label class="ds_accordion-item__label" for="panel-1"><span class="visually-hidden">Show this section</span></label>
        </div>
        <div class="ds_accordion-item__body">
            <p>Veterans are entitled to the same healthcare as any citizen. And there are <a href="#">health care options and support</a> available specifically for veterans.  </p>
            <p>If you have a health condition that's related to your service, you're entitled to priority treatment based on clinical need. </p>
        </div>
    </div>

    <div class="ds_accordion-item">
        <input type="checkbox" class="visually-hidden  ds_accordion-item__control" id="panel-2" aria-labelledby="panel-2-heading" />
        <div class="ds_accordion-item__header">
            <h3 id="panel-2-heading" class="ds_accordion-item__title">
                Employability for veterans
            </h3>
            <span class="ds_accordion-item__indicator"></span>
            <label class="ds_accordion-item__label" for="panel-2"><span class="visually-hidden">Show this section</span></label>
        </div>
        <div class="ds_accordion-item__body">
            <p>If you're looking for a job, there are several organisations that can help you <a href="#">find a job or develop new skills</a>.</p>
        </div>
    </div>

    <div class="ds_accordion-item">
        <input type="checkbox" class="visually-hidden  ds_accordion-item__control" id="panel-3" aria-labelledby="panel-3-heading" />
        <div class="ds_accordion-item__header">
            <h3 id="panel-3-heading" class="ds_accordion-item__title">
                Housing for veterans
            </h3>
            <span class="ds_accordion-item__indicator"></span>
            <label class="ds_accordion-item__label" for="panel-3"><span class="visually-hidden">Show this section</span></label>
        </div>
        <div class="ds_accordion-item__body">
            <p>If you need <a href="#">help finding a place to live</a> there's support specifically for veterans.</p>
        </div>
    </div>
</div>

Developer notes

Configuration options

The colour of the accordions’ title text can be overridden, though blue is more commonly recognised as a link colour.

$accordion__header-color

Your value for this should be included before you include the SCSS file.

$accordion__header-color: red;
@import '/path/to/components/accordion/accordion';

About this component

An accordion is made up of in-page links. When one of the links is clicked, the link will expand an associated panel to reveal its contents. If the same link is clicked again, the panel’s contents will collapse and be hidden once again. Multiple panels can be open at the same time.

There is an option to have an “Open all” and “Close all” function.

An accordion cannot be nested inside another accordion.

Why we use this component

Sometimes, content is displayed best when it’s broken into small chunks, with users able to pick the particular chunk they need from a longer list of accordion options. When thinking about using an accordion it should be tested with users, alongside other options, to find the best way to display an individual item of content.

Website analytics

Opening and closing individual accordion panels by clicking on their headings can be tracked through the original page path, click text, and a data attribute showing the action and item number.

Opening and closing all accordion panels by clicking on the “Open all”/”Close all” link can be tracked through the original page path, click text and a data attribute attached on the element.

The data attributes are added automatically by the Design System’s “tracking” script.

Feedback, help or support

If you need any help or want to give any feedback you can e-mail us at: designsystem@gov.scot

Back to top