Accordion Snippet

An accordion menu is a vertically stacked list of headers that can be expanded or contracted to reveal or hide content.

Implementation

Things to know:

The accordion snippet allows the creation of an accordion through a table-based interface.

Accordions headers are added and removed by increasing or decreasing the number of table rows. 

When to use the accordion snippet:

Accordions are often used with content such as frequently asked questions (FAQs), procedures, or tasks that would otherwise take up a large amount of visual space on a page. 

When clicked, each accordion header will reveal its content. Only one accordion header will be open at a time to optimize page space. 

Usability guidance:

Accordions are best used with large amounts of text that would be easier to digest in smaller chunks. 

Accordion headers should accurately describe the content they contain.

Snippet Map:

The images below depict how the fields in the snippet table are rendered in the final result.

Snippet table:

 

Final Result:

Live example:

Accordion Example

This is a live demonstration of an accordion

Expand AllCollapse All

Title One

Content one

Back to top

Title Two

• Item One
• Item Two
• Item Three

Sunt ullam harum.

Repellendus quo eos minus et id nisi. Rerum sint ut omnis sint tenetur voluptatem voluptatibus temporibus repellat. Ipsam ipsa quia amet adipisci et quia qui qui nostrum.

Back to top

Title Three

Item One

Item One Description

Back to top

---