Accordion
An element that allows content to be expanded or collapsed. Design elements include a title, open/close toggle, and the text placed within the accordion content well.
On this page
Example
Accordion Component
Curabitur quis sem odio rhoncus odio mauris. Nibh dui tempor bibendum viverra amet cum. Lectus tortor aliquet nunc augue mauris duis. Viverra tempor nullam facilisis sed magna viverra. Lorem volutpat ut id sagittis orci. Turpis pellentesque eros sit ultricies ultricies. Eget mi diam sit fermentum maecenas bibendum. Sit pulvinar elit accumsan magna scelerisque. Congue congue malesuada diam lacinia ut id lorem enim sit. Ipsum eu neque pretium praesent phasellus nisl tristique pretium. In tristique sit vitae vestibulum. In venenatis dignissim amet faucibus vitae non lectus id. Purus id turpis ac a dolor sit. Sed interdum nisl a proin. Aliquam scelerisque aliquam aliquet at neque ultrices tellus adipiscing aenean.
Sagittis sem nibh amet lectus elementum in viverra elementum massa. Tincidunt quisque justo et senectus bibendum ultricies. Id est turpis in nisi in. Arcu duis semper amet in eget consectetur consequat magna fermentum. Ornare sed.
When to use
Accordions are used to organize content in a compact, space-saving format, making it easier for users to scroll through a page without overwhelming them with all of the information at once.
Guidelines
- Too many accordions can confuse or overwhelm users. Use them sparingly. If the content is brief, it should only be placed in an accordion if it is relevant to a small set of users.
Component note
- When an Accordion is in the open state, the URL should be updated to reflect the active state. Users should be able to use the accordion-specific ID when sharing the URL. On click of the accordion-specific link, the page should open, scroll to the correct anchor and open the accordion.
- What content can be placed in an accordion?
- Body text, Headings, Tables, Ordered/Unordered Lists, Buttons
Component Cheat Sheet
[Accordion]
[Accordion #/#]
Heading:
Content:
How to Add This Component
Add a “Longform Content” block
Choose “Accordion” from the menu