Accordion
Use accordions to organize content into collapsible sections with smooth navigation.
Accordion structure
Section titled “Accordion structure”An accordion is a container plus collapsible panels. The panels can be linked to the accordion so only one is open at a time.
Accordion example
Section titled “Accordion example”This accordion example is best understood as a reusable layout pattern rather than a single widget on the page. Watch how related sections are grouped into one container, how each header controls reveal and collapse behavior, and why accordions work well when you need dense content without forcing a long scrolling page.
Collapsible panel
Section titled “Collapsible panel”Let’s explore a collapsible panel and how its initial expanded state is controlled. This step matters because Collapsible panel is part of Design View, and understanding that context makes the next action easier to repeat in your own project.
Orient yourself in Properties panel
Section titled “Orient yourself in Properties panel”Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Collapse: Show and see how it fits into this area.
Collapse: Show
Section titled “Collapse: Show”Use Show to control whether the panel starts expanded. This step matters because Collapse: Show is part of Selection Panels Properties Collapseshow, and understanding that context makes the next action easier to repeat in your own project.
Collapse: Parent
Section titled “Collapse: Parent”Use Parent to link the panel to the accordion container. This is what makes it behave like an accordion (one open at a time).
Accordion variants
Section titled “Accordion variants”Bootstrap accordions support variants like flush styling and always open behavior.
Flush accordion
Section titled “Flush accordion”Add the .accordion-flush class to the accordion container to remove some borders and rounded corners, rendering it edge-to-edge with its parent.
Always open accordion
Section titled “Always open accordion”To allow multiple items to stay open, omit the parent reference on each collapse panel (no data-bs-parent).
Collapse: Parent (optional)
Section titled “Collapse: Parent (optional)”Clear Parent to make a collapse panel independent. With no parent, opening one item won’t close the others.
Next steps
Section titled “Next steps”Continue with other Components tours or return to the Components menu.