The Accordion component is a vertically stacked list of items with content sections collapsed by default. Each item's content can be expanded and then collapsed by clicking the title allowing users to expose content in a progressive manner. Accordions minimize scrolling on long pages and display critical information first.
Base example
<div class="c-accordion">
<input class="accordion__input" id="accordion-id-1" name="accordion-checkbox" type="checkbox">
<label for="accordion-id-1" aria-controls="accordion-aria-control-1" aria-expanded="false" id="accordion-labelledby-1" role="heading">Common raven</label>
<div id="accordion-aria-control-1" class="accordion__content" role="region" aria-labelledby="accordion-labelledby-1" aria-hidden="true">
<div class="accordion__spacing">
<p>The <strong>common raven</strong> (Corvus corax), also known as the northern raven, is a large all-black passerine bird. Found across the Northern Hemisphere, it is the most widely distributed of all corvids.</p>
</div>
</div>
</div>
<div class="c-accordion">
<input class="accordion__input" id="accordion-id-2" name="accordion-checkbox" type="checkbox">
<label for="accordion-id-2" aria-controls="accordion-aria-control-2" aria-expanded="false" id="accordion-labelledby-2" role="heading">Australian raven</label>
<div id="accordion-aria-control-2" class="accordion__content" role="region" aria-labelledby="accordion-labelledby-2" aria-hidden="true">
<div class="accordion__spacing">
<p>The <strong>Australian raven</strong> (Corvus coronoides) is a passerine bird in the genus Corvus native to much of southern and northeastern Australia. Measuring 46–53 centimetres (18–21 in) in length, it has all-black plumage, beak and mouth, as well as strong grey-black legs and feet.</p>
</div>
</div>
</div>
<div class="c-accordion">
<input class="accordion__input" id="accordion-id-3" name="accordion-checkbox" type="checkbox">
<label for="accordion-id-3" aria-controls="accordion-aria-control-3" aria-expanded="false" id="accordion-labelledby-3" role="heading">This is a test of an accordion label that spans more than one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a dictum enim. Nunc sit amet purus sed magna dapibus convallis cursus a sapien.</label>
<div id="accordion-aria-control-3" class="accordion__content" role="region" aria-labelledby="accordion-labelledby-3" aria-hidden="true">
<div class="accordion__spacing">
<p>The <strong>Australian raven</strong> (Corvus coronoides) is a passerine bird in the genus Corvus native to much of southern and northeastern Australia. Measuring 46–53 centimetres (18–21 in) in length, it has all-black plumage, beak and mouth, as well as strong grey-black legs and feet.</p>
</div>
</div>
</div>
<div class="c-accordion">
<input class="accordion__input" id="accordion-id-4" name="accordion-checkbox" type="checkbox">
<label for="accordion-id-4" aria-controls="accordion-aria-control-4" aria-expanded="false" id="accordion-labelledby-4" role="heading">Thick-billed raven</label>
<div id="accordion-aria-control-4" class="accordion__content" role="region" aria-labelledby="accordion-labelledby-4" aria-hidden="true">
<div class="accordion__spacing">
<p>The <strong>thick-billed raven</strong> (Corvus crassirostris), a corvid from the Horn of Africa, shares with the common raven the distinction of being the largest bird in the corvid family, and indeed the largest of the most diverse bird order with well over 5,000 identified species, the passerines. </p>
</div>
</div>
</div>
Accordion - single variant
The single variant insures only one section is open at any given time.
<div class="c-accordion">
<input class="accordion__input accordion__input--single" id="accordion-id-1s" name="accordion-radio" type="checkbox">
<label for="accordion-id-1s" aria-controls="accordion-aria-control-1s" aria-expanded="false" id="accordion-labelledby-1s" role="heading">Common raven</label>
<div id="accordion-aria-control-1s" class="accordion__content" role="region" aria-labelledby="accordion-labelledby-1" aria-hidden="true">
<div class="accordion__spacing">
<p>The <strong>common raven</strong> (Corvus corax), also known as the northern raven, is a large all-black passerine bird. Found across the Northern Hemisphere, it is the most widely distributed of all corvids.</p>
</div>
</div>
</div>
<div class="c-accordion">
<input class="accordion__input accordion__input--single" id="accordion-id-2s" name="accordion-radio" type="checkbox">
<label for="accordion-id-2s" aria-controls="accordion-aria-control-2s" aria-expanded="false" id="accordion-labelledby-2s" role="heading">Australian raven</label>
<div id="accordion-aria-control-2s" class="accordion__content" role="region" aria-labelledby="accordion-labelledby-2" aria-hidden="true">
<div class="accordion__spacing">
<p>The <strong>Australian raven</strong> (Corvus coronoides) is a passerine bird in the genus Corvus native to much of southern and northeastern Australia. Measuring 46–53 centimetres (18–21 in) in length, it has all-black plumage, beak and mouth, as well as strong grey-black legs and feet.</p>
</div>
</div>
</div>
<div class="c-accordion">
<input class="accordion__input accordion__input--single" id="accordion-id-3s" name="accordion-radio" type="checkbox">
<label for="accordion-id-3s" aria-controls="accordion-aria-control-3s" aria-expanded="false" id="accordion-labelledby-3s" role="heading">Thick-billed raven</label>
<div id="accordion-aria-control-3s" class="accordion__content" role="region" aria-labelledby="accordion-labelledby-3" aria-hidden="true">
<div class="accordion__spacing">
<p>The <strong>thick-billed raven</strong> (Corvus crassirostris), a corvid from the Horn of Africa, shares with the common raven the distinction of being the largest bird in the corvid family, and indeed the largest of the most diverse bird order with well over 5,000 identified species, the passerines. </p>
</div>
</div>
</div>
Found in
The Accordion components are used in the following blocks: