: The actual trigger element. Use .collapsed for items that should start hidden.
Groups related content together for easier scanning.
: The container for the hidden content, which requires a unique id linked to the button's data-bs-target . Accordion · Bootstrap v5.3 accordion menu bootstrap
An accordion is a vertically stacked list of headers that users can click to reveal or hide associated content. In the Bootstrap ecosystem, this component leverages the to manage state transitions without requiring you to write custom scripts. Key benefits include:
Automatically adapts to mobile screens, ensuring a consistent user experience. 2. Basic Structure: Building Your First Accordion : The actual trigger element
Hides secondary information until needed, reducing page length.
Creating a vertical navigation system that saves space without sacrificing usability is a core challenge in modern web design. The is the definitive solution, providing a sleek, mobile-friendly way to organize large amounts of content into collapsible panels. : The container for the hidden content, which
To create a standard accordion in , you need a specific hierarchy of classes. Here is the foundational structure: .accordion : The parent wrapper that holds all items. .accordion-item : The container for an individual row. .accordion-header : Wraps the clickable button.