Skip to content

docs(accordion): add nested accordion example #42363

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stafferin wants to merge 1 commit into
base: main
Choose a base branch
from
+57 −0
Open

docs(accordion): add nested accordion example #42363

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions site/src/content/docs/components/accordion.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,63 @@ Omit the `data-bs-parent` attribute on each `.accordion-collapse` to make accord
</div>
</div>`} />

### Nested

Accordions can be nested by placing one accordion inside the `.accordion-body` of another. The `data-bs-parent` attribute on the nested `.accordion-collapse` elements must reference the nested accordion’s container (not the outer one), so that opening or closing nested items doesn’t affect the parent accordion’s state.

<Example code={`<div class="accordion" id="accordionNestingExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#nestingCollapseOne" aria-expanded="true" aria-controls="nestingCollapseOne">
Parent Accordion Item #1
</button>
</h2>
<div id="nestingCollapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionNestingExample">
<div class="accordion-body">
<strong>This is the first parent item’s accordion body.</strong> It contains another, nested accordion.
<div class="accordion mt-3" id="accordionNestedExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#nestedCollapseOne" aria-expanded="true" aria-controls="nestedCollapseOne">
Nested Accordion Item #1
</button>
</h2>
<div id="nestedCollapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionNestedExample">
<div class="accordion-body">
<strong>This is the first nested item’s accordion body.</strong> Note how its <code>data-bs-parent</code> targets the nested accordion, not the outer one.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nestedCollapseTwo" aria-expanded="false" aria-controls="nestedCollapseTwo">
Nested Accordion Item #2
</button>
</h2>
<div id="nestedCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionNestedExample">
<div class="accordion-body">
<strong>This is the second nested item’s accordion body.</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#nestingCollapseTwo" aria-expanded="false" aria-controls="nestingCollapseTwo">
Parent Accordion Item #2
</button>
</h2>
<div id="nestingCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionNestingExample">
<div class="accordion-body">
<strong>This is the second parent item’s accordion body.</strong>
</div>
</div>
</div>
</div>`} />

## Accessibility

Please read the [collapse accessibility section]([[docsref:/components/collapse#accessibility]]) for more information.
Expand Down