Accordion

An accordion is a list of headers that hide or reveal additional content when selected.

This component is based on USWDS.

Example:

Drawer 1

Lorem ipsum sit amet, consectetur adipiscing elit. Sed elementum ante ac lacus mollis auctor. Quisque ultricies blandit mauris, a lobortis quam vestibulum ut. Pellentesque dui ligula, fringilla in dictum ac, sodales ut sapien. Cras justo nibh, consectetur et velit ut.

  • List item one
  • List item two
  • List item three

Drawer 2

Pellentesque dui ligula, fringilla in dictum ac, sodales ut sapien. Cras justo nibh, consectetur et velit ut, efficitur pulvinar nibh. Aenean laoreet ligula et mi vehicula mollis. Nulla facilisi. Duis varius massa mi, ac sollicitudin turpis rhoncus ac. Vestibulum ut aliquet diam, ac rutrum nisi.

Drawer 3

Lorem ipsum sit amet, consectetur adipiscing elit. Sed elementum ante ac lacus mollis auctor. Quisque ultricies blandit mauris, a lobortis quam vestibulum ut. Pellentesque dui ligula, fringilla in dictum ac, sodales ut sapien. Cras justo nibh, consectetur et velit ut, efficitur pulvinar nibh. Aenean laoreet ligula et mi vehicula mollis. Nulla facilisi. Duis varius massa mi, ac sollicitudin turpis rhoncus ac. Vestibulum ut aliquet diam, ac rutrum nisi.

How to author:
In the DA menu, go to Library > Blocks > and choose Accordion.

Tabs

You can make an accordion look like tabs by adding the tabs class in parentheses. There is a limit of five tabs per accordion; if you exceed this limit, it will be displayed as an accordion instead.

Example:

Drawer 1

Lorem ipsum sit amet, consectetur adipiscing elit. Sed elementum ante ac lacus mollis auctor. Quisque ultricies blandit mauris, a lobortis quam vestibulum ut. Pellentesque dui ligula, fringilla in dictum ac, sodales ut sapien. Cras justo nibh, consectetur et velit ut.

  • List item one
  • List item two
  • List item three

Drawer 2

Pellentesque dui ligula, fringilla in dictum ac, sodales ut sapien. Cras justo nibh, consectetur et velit ut, efficitur pulvinar nibh. Aenean laoreet ligula et mi vehicula mollis. Nulla facilisi. Duis varius massa mi, ac sollicitudin turpis rhoncus ac. Vestibulum ut aliquet diam, ac rutrum nisi.

Drawer 3

Lorem ipsum sit amet, consectetur adipiscing elit. Sed elementum ante ac lacus mollis auctor. Quisque ultricies blandit mauris, a lobortis quam vestibulum ut. Pellentesque dui ligula, fringilla in dictum ac, sodales ut sapien. Cras justo nibh, consectetur et velit ut, efficitur pulvinar nibh. Aenean laoreet ligula et mi vehicula mollis. Nulla facilisi. Duis varius massa mi, ac sollicitudin turpis rhoncus ac. Vestibulum ut aliquet diam, ac rutrum nisi.

How to author:
In the DA menu, go to Library > Blocks > and choose Tabs Accordion.