Accordions are useful when a page covers several different topics. A good example would be an FAQ page. It's best to avoid using accordions to make long pages appear shorter.
All focusable elements in the accordion are included in the page tab sequence.
Accordions have keyboard support including Tab and up and down arrows.
When focused, accordion headers expand the panel with space or enter keys.
When clicked, accordion headers toggle the appropriate aria-hidden and aria-expanded attributes.
The following is a basic accordion component. All accordion panels are closed by default.
.accordion__button selector doesn't have to be a button tag. In fact, header tags in the accordion help describe the architecture of a page. For example, if an accordion group lives below a page's
<h1>, the accordion headers could be
In Figure 2 (line 2) notice the
.h5 class. Header utility classes are particularly useful in this example. When a semantic header (e.g.
<h1>) should be smaller visually than its natural markup style. You can use header utilities on non-semantic tags (e.g.,
<button>), that need the appearance of a header.
Open by Default
You may want one of your accordion topics to be open by default (when the page loads), like the following example: