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.
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: