Photo by Sara Codair
Accordion
Introduction
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.
Default Behavior
The following is a basic accordion component. All accordion panels are closed by default.
The monarch butterfly or simply monarch is a milkweed butterfly in the family Nymphalidae. Other common names, depending on region, include milkweed, common tiger, wanderer, and black veined brown. It may be the most familiar North American butterfly, and is considered an iconic pollinator species.
The black swallowtail, American swallowtail, or parsnip swallowtail, is a butterfly found throughout much of North America. It is the state butterfly of Oklahoma and New Jersey.
The cecropia moth is North America's largest native moth. It is a member of the family Saturniidae, or giant silk moths. Females have been documented with a wingspan of five to seven inches or more.
The elephant hawk moth or large elephant hawk moth, is a moth in the family Sphingidae. Its common name is derived from the caterpillar's resemblance to an elephant's trunk. It is most common incentral Europe and is distributed throughout the Palearctic region.
The spicebush swallowtail or green-clouded butterfly, is a common black swallowtail butterfly found in North America. It has two subspecies, Papilio troilus troilus and Papilio troilus ilioneus, the latter found mainly in the Florida peninsula.
<div class="accordion">
<button
class="accordion__button h5"
id="acc-button-example-01"
data-accordion="button"
aria-controls="acc-panel-example-01"
aria-expanded="false">
Danaus Plexippus
</button>
<div
class="accordion__panel"
id="acc-panel-example-01"
data-accordion="panel"
aria-labelledby="acc-button-example-01"
role="region">
<div class="accordion__panel__content">
<p>
The monarch butterfly or simply monarch is a milkweed butterfly...
</p>
</div>
</div>
<!-- Repeat pair above as needed -->
</div>
| Line # | Details |
|---|---|
| 1 | The parent This selector uses JavaScript to group a set of topics (accordion headers) with one another. |
| 3-10 | The child The The The The |
| 12-25 | The child The The The The The granchild |
Semantic Headers
The the .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 <h2> tags.
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:
The black swallowtail, American swallowtail, or parsnip swallowtail, is a butterfly found throughout much of North America. It is the state butterfly of Oklahoma and New Jersey.
The cecropia moth is North America's largest native moth. It is a member of the family Saturniidae, or giant silk moths. Females have been documented with a wingspan of five to seven inches or more.
The elephant hawk moth or large elephant hawk moth, is a moth in the family Sphingidae. Its common name is derived from the caterpillar's resemblance to an elephant's trunk. It is most common incentral Europe and is distributed throughout the Palearctic region.
The spicebush swallowtail or green-clouded butterfly, is a common black swallowtail butterfly found in North America. It has two subspecies, Papilio troilus troilus and Papilio troilus ilioneus, the latter found mainly in the Florida peninsula.
<button
class="accordion__button h5"
id="acc-button-id"
data-accordion="button"
aria-controls="acc-panel-id"
👉 aria-expanded="true">
Danaus Plexippus
</button>
<div
class="accordion__panel 👉 show"
id="acc-panel-id"
data-accordion="panel"
aria-labelledby="acc-button-id"
role="region">
<div class="accordion__panel__content">
...
</div>
</div>