Accordions act as a way of collapsing otherwise unwieldy content. This can be useful for contexts where its more useful to show an overview of options, such as when dividing by audience or action. They should not be used for aesthetic reasons alone.
Accordion 1 heading
Accordion 1 content
Accordion 2 heading
Accordion 2 content
There are several conditions that we need to keep in mind with this accordion:
- User prefers reduced motion
<div class="accordion"> <div class="accordion-heading"> <h2>Accordion 1 heading</h2> </div> <div class="accordion-content"> <p>Accordion 1 content</p> </div> </div>