Accordion
Sample HTML
<div class="ds_accordion" data-module="ds-accordion">
<button 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>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’/’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’ button 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 and support
If you need help or support you can e-mail us at designsystem@gov.scot
There is a problem
Thanks for your feedback