Accordions
An accordion is a vertically stacked list of items that can be expanded or collapsed to reveal or hide content. Each item has a title (or header), and clicking the title toggles visibility of the associated content panel.
They are especially useful for improving readability and navigation by reducing the need to scroll through long pages of text.
When to Use an Accordion
Use an accordion when:
- You have multiple sections of content and want to avoid overwhelming users.
- The content is related, but doesn't all need to be visible at once.
- You want to allow the user to focus on one piece of information at a time.
When Not to Use an Accordion
Avoid accordions when:
- All content needs to be visible at once.
- The content is too short, using an accordion in that case may add unnecessary clicks and complexity.
- Users need to compare sections side-by-side—hidden content reduces comparison clarity.
- You're working with content that should be indexed or searched as a whole (some accordions don't load content until expanded, which may affect search).
Example
-
Item title 1
Item content goes here...
-
Item title 2
Item content goes here...
Key Attributes
| Attribute | Description | Values |
|---|---|---|
data-accordion |
Initializes the accordion component. | N/A |
data-allow-all-closed |
Allows all accordion items to be closed at once. | true, false |
data-multi-expand |
Allows multiple accordion items to be expanded simultaneously. | true, false |
data-deep-link |
Enables deep linking to specific accordion items via URL hash. | true, false |
data-update-history |
Updates the browser history when an accordion item is opened or closed. | true, false |
data-deep-link-smudge |
Smoothly scrolls to the accordion item when deep linking. | true, false |
data-deep-link-smudge-delay |
Sets a delay (in milliseconds) before scrolling to the accordion item when deep linking. | Any positive integer (milliseconds) |
Deep Linking Example
With data-deep-link="true", you can link directly to a section like so:
https://www.lib.ncsu.edu/page#item-id-2
This will automatically scroll to and expand the corresponding section when the page loads.
Updated