Skip to content Skip to main navigation Report an accessibility issue

Accordion Folds

Documentation

Usage: Accordion folds can be a handy way of organizing bits of content on a page.

Do
  • Pay particular attention to the role attributes and aria-controls in these examples. They make your content more accessible.
Don’t
  • Don’t use folds to tuck away content you’d rather not look at. Clearer, concise writing or making hard editing choices will be a better choice.
  • There is no way to direct link to a fold that is not open, so do not hide content behind a tab that you expect to be easy to find.

Example

Collapse 1

Collapsible Group Item #1

Collapsible Group Item #2

Shortcodes for the WordPress theme

[collapsibles]
[collapse title="Collapse 1" active="true"]Collapsible Group Item #1[/collapse]
[collapse title="Collapse 2" active="false"]Collapsible Group Item #2[/collapse]
[/collapsibles]