From 2aedf0fc71d24c7aafc4eb68fb4beb18c5126499 Mon Sep 17 00:00:00 2001
From: stafferin <stafferin2023@gmail.com>
Date: Sun, 26 Apr 2026 22:08:09 -0400
Subject: [PATCH] docs(accordion): add nested accordion example

Closes #41895
---
 .../src/content/docs/components/accordion.mdx | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/site/src/content/docs/components/accordion.mdx b/site/src/content/docs/components/accordion.mdx
index e8df6d88b625..6bdbb7f54e82 100644
--- a/site/src/content/docs/components/accordion.mdx
+++ b/site/src/content/docs/components/accordion.mdx
@@ -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.