Open demo

CSS code

HTML 
<div><span class="lbl">Nested</span>
<div class="acc acc-nest">
<details open>
<summary>Getting started<span class="chev" aria-hidden="true"></span></summary>
<div class="body">Pick the set you want and copy the block you like.
<details>
<summary>Installing<span class="chev" aria-hidden="true"></span></summary>
<div class="body">There is nothing to install — open the file and copy.</div>
</details>
<details>
<summary>Customising<span class="chev" aria-hidden="true"></span></summary>
<div class="body">Colours and sizes live at the top of each rule.</div>
</details></div>
</details>
</div>
</div>
<div><span class="lbl">Sidebar navigation</span>
<nav class="acc acc-side" aria-label="Library">
<details open>
<summary>Components<span class="chev" aria-hidden="true"></span></summary>
<div class="body"><a href="#" aria-current="page">Accordions</a><a href="#">Buttons</a><a href="#">Forms</a><a href="#">Tables</a></div>
</details>
<details>
<summary>Templates<span class="chev" aria-hidden="true"></span></summary>
<div class="body"><a href="#">Business</a><a href="#">Portfolio</a><a href="#">Blog</a></div>
</details>
</nav>
</div>
CSS 
/* Native <details>/<summary>, nested for docs and used as a sidebar menu. */
.acc{--acc-bg:#fff;--acc-border:#e2e8f0;--acc-text:#1e293b;--acc-muted:#475569;
  --acc-hover:#f8fafc;--acc-icon:#64748b;--acc-focus:#2563eb;max-width:560px}
.acc details{background:var(--acc-bg);border:1px solid var(--acc-border);border-radius:11px;margin:0 0 9px;overflow:hidden}
.acc summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 18px;cursor:pointer;
  list-style:none;font-size:.94rem;font-weight:600;color:var(--acc-text);transition:background-color .15s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--acc-hover)}
.acc summary:focus-visible{outline:2px solid var(--acc-focus);outline-offset:-2px}
.acc .body{padding:0 18px 17px;font-size:.89rem;line-height:1.66;color:var(--acc-muted)}
/* chevron: two borders of a small square, rotated to point down, then up when open */
.acc .chev{flex:none;width:9px;height:9px;margin-top:-3px;border-right:2px solid var(--acc-icon);
  border-bottom:2px solid var(--acc-icon);transform:rotate(45deg);transition:transform .2s}
.acc details[open]>summary .chev{margin-top:3px;transform:rotate(-135deg)}
/* nested: a lighter card inside the open panel */
.acc-nest details details{margin:9px 0 0;border-color:#f1f5f9;background:#f8fafc}
.acc-nest details details summary{padding:11px 15px;font-size:.87rem;font-weight:500}
/* sidebar navigation */
.acc-side{max-width:290px}
.acc-side details{border:0;border-radius:0;margin:0;background:transparent}
.acc-side summary{padding:11px 13px;border-radius:8px;font-size:.88rem}
.acc-side summary:hover{background:#f1f5f9}
.acc-side .body{padding:2px 0 8px}
.acc-side a{display:block;padding:7px 13px 7px 26px;border-radius:7px;font-size:.85rem;color:#475569;text-decoration:none}
.acc-side a:hover{background:#f1f5f9;color:#0f172a}
.acc-side a:focus-visible{outline:2px solid var(--acc-focus);outline-offset:-2px}
.acc-side a[aria-current="page"]{background:#eff6ff;color:#2563eb;font-weight:600}
@media (prefers-reduced-motion:reduce){.acc summary,.acc .chev{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<div><span class="lbl">Nested</span>
<div class="accordion acc acc-nest">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#b6-3" aria-expanded="true" aria-controls="b6-3">Getting started</button></h3>
<div id="b6-3" class="accordion-collapse collapse show">
<div class="accordion-body">Pick the set you want and copy the block you like.
<div class="accordion acc acc-inner">
<div class="accordion-item">
<h4 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#b6-1" aria-expanded="false" aria-controls="b6-1">Installing</button></h4>
<div id="b6-1" class="accordion-collapse collapse">
<div class="accordion-body">There is nothing to install — open the file and copy.</div>
</div>
</div>
<div class="accordion-item">
<h4 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#b6-2" aria-expanded="false" aria-controls="b6-2">Customising</button></h4>
<div id="b6-2" class="accordion-collapse collapse">
<div class="accordion-body">Colours and sizes live at the top of each rule.</div>
</div>
</div>
</div></div>
</div>
</div>
</div>
</div>
<div><span class="lbl">Sidebar navigation</span>
<nav class="accordion acc acc-side" aria-label="Library">
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#b6-4" aria-expanded="true" aria-controls="b6-4">Components</button></h3>
<div id="b6-4" class="accordion-collapse collapse show">
<div class="accordion-body"><div class="nav flex-column"><a class="nav-link active" href="#" aria-current="page">Accordions</a><a class="nav-link" href="#">Buttons</a><a class="nav-link" href="#">Forms</a><a class="nav-link" href="#">Tables</a></div></div>
</div>
</div>
<div class="accordion-item">
<h3 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#b6-5" aria-expanded="false" aria-controls="b6-5">Templates</button></h3>
<div id="b6-5" class="accordion-collapse collapse">
<div class="accordion-body"><div class="nav flex-column"><a class="nav-link" href="#">Business</a><a class="nav-link" href="#">Portfolio</a><a class="nav-link" href="#">Blog</a></div></div>
</div>
</div>
</nav>
</div>
CSS 
/* Bootstrap .accordion + Collapse plugin, restyled through the --bs-accordion-* variables. */
.acc{--bs-accordion-color:#475569;--bs-accordion-bg:#fff;--bs-accordion-border-color:#e2e8f0;
  --bs-accordion-border-radius:11px;--bs-accordion-inner-border-radius:10px;
  --bs-accordion-btn-padding-x:18px;--bs-accordion-btn-padding-y:15px;--bs-accordion-btn-color:#1e293b;
  --bs-accordion-btn-bg:transparent;--bs-accordion-active-color:#1e293b;--bs-accordion-active-bg:transparent;
  --bs-accordion-btn-focus-box-shadow:none;--bs-accordion-btn-icon-width:16px;--bs-accordion-btn-icon-transition:transform .2s;
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-width='2' d='M2.5 5 8 10.5 13.5 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon:var(--bs-accordion-btn-icon);
  --bs-accordion-body-padding-x:18px;--bs-accordion-body-padding-y:17px;
  --acc-hover:#f8fafc;--acc-focus:#2563eb;max-width:560px}
/* separate cards instead of one joined block */
.acc .accordion-item{margin-bottom:9px;border-top:var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
  border-radius:var(--bs-accordion-border-radius);overflow:hidden}
.acc .accordion-button{justify-content:space-between;gap:14px;font-size:.94rem;font-weight:600;line-height:normal;
  box-shadow:none;transition:background-color .15s}
.acc .accordion-button::after{margin-left:0}
.acc .accordion-button:hover{background-color:var(--acc-hover)}
.acc .accordion-button:focus-visible{outline:2px solid var(--acc-focus);outline-offset:-2px}
.acc .accordion-body{padding-top:0;font-size:.89rem;line-height:1.66}
/* nested: an inner .accordion with lighter cards */
.acc-inner{--bs-accordion-bg:#f8fafc;--bs-accordion-border-color:#f1f5f9;--bs-accordion-btn-padding-x:15px;
  --bs-accordion-btn-padding-y:11px;max-width:none}
.acc-inner .accordion-item{margin:9px 0 0}
.acc-inner .accordion-button{font-size:.87rem;font-weight:500;line-height:1.66}
/* sidebar navigation: flush items, Bootstrap .nav inside the panels */
.acc-side{--bs-accordion-btn-padding-x:13px;--bs-accordion-btn-padding-y:11px;--bs-accordion-bg:transparent;max-width:290px}
.acc-side .accordion-item{margin:0;border:0;border-radius:0}
.acc-side .accordion-button{border-radius:8px;font-size:.88rem}
.acc-side .accordion-button:hover{background-color:#f1f5f9}
.acc-side .accordion-body{padding:2px 0 8px}
.acc-side .nav{--bs-nav-link-padding-y:7px;--bs-nav-link-font-size:.85rem;--bs-nav-link-color:#475569;
  --bs-nav-link-hover-color:#0f172a}
.acc-side .nav-link{padding-right:13px;padding-left:26px;border-radius:7px}
.acc-side .nav-link:hover{background:#f1f5f9}
.acc-side .nav-link:focus-visible{outline:2px solid var(--acc-focus);outline-offset:-2px;box-shadow:none}
.acc-side .nav-link.active{background:#eff6ff;color:#2563eb;font-weight:600}
@media (prefers-reduced-motion:reduce){.acc .accordion-button,.acc .accordion-button::after,.acc .collapsing,.acc .nav-link{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">Nested</span>
<div class="max-w-[560px]">
<details class="group mb-[9px] overflow-hidden rounded-[11px] border border-[#e2e8f0] bg-white" open>
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] px-[18px] py-[15px] text-[.94rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">Getting started<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">Pick the set you want and copy the block you like.
<details class="group/in mt-[9px] overflow-hidden rounded-[11px] border border-[#f1f5f9] bg-[#f8fafc]">
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] px-[15px] py-[11px] text-[.87rem] font-medium transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">Installing<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open/in:mt-[3px] group-open/in:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">There is nothing to install — open the file and copy.</div>
</details>
<details class="group/in mt-[9px] overflow-hidden rounded-[11px] border border-[#f1f5f9] bg-[#f8fafc]">
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] px-[15px] py-[11px] text-[.87rem] font-medium transition-[background-color] duration-150 hover:bg-[#f8fafc] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">Customising<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open/in:mt-[3px] group-open/in:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="px-[18px] pb-[17px] text-[.89rem] leading-[1.66] text-[#475569]">Colours and sizes live at the top of each rule.</div>
</details></div>
</details>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#64748b] uppercase">Sidebar navigation</span>
<nav class="max-w-[290px]" aria-label="Library">
<details class="group" open>
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] rounded-lg px-[13px] py-[11px] text-[.88rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">Components<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="pt-[2px] pb-2 leading-[1.66]"><a class="block rounded-[7px] py-[7px] pr-[13px] pl-[26px] text-[.85rem] no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] text-[#475569] hover:bg-[#f1f5f9] hover:text-[#0f172a] aria-[current=page]:bg-[#eff6ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#2563eb]" href="#" aria-current="page">Accordions</a><a class="block rounded-[7px] py-[7px] pr-[13px] pl-[26px] text-[.85rem] no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] text-[#475569] hover:bg-[#f1f5f9] hover:text-[#0f172a] aria-[current=page]:bg-[#eff6ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#2563eb]" href="#">Buttons</a><a class="block rounded-[7px] py-[7px] pr-[13px] pl-[26px] text-[.85rem] no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] text-[#475569] hover:bg-[#f1f5f9] hover:text-[#0f172a] aria-[current=page]:bg-[#eff6ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#2563eb]" href="#">Forms</a><a class="block rounded-[7px] py-[7px] pr-[13px] pl-[26px] text-[.85rem] no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] text-[#475569] hover:bg-[#f1f5f9] hover:text-[#0f172a] aria-[current=page]:bg-[#eff6ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#2563eb]" href="#">Tables</a></div>
</details>
<details class="group">
<summary class="flex cursor-pointer list-none items-center justify-between gap-[14px] rounded-lg px-[13px] py-[11px] text-[.88rem] font-semibold transition-[background-color] duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] motion-reduce:transition-none [&::-webkit-details-marker]:hidden">Templates<span class="-mt-[3px] size-[9px] flex-none rotate-45 border-r-2 border-b-2 border-[#64748b] transition-transform duration-200 group-open:mt-[3px] group-open:-rotate-[135deg] motion-reduce:transition-none" aria-hidden="true"></span></summary>
<div class="pt-[2px] pb-2 leading-[1.66]"><a class="block rounded-[7px] py-[7px] pr-[13px] pl-[26px] text-[.85rem] no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] text-[#475569] hover:bg-[#f1f5f9] hover:text-[#0f172a] aria-[current=page]:bg-[#eff6ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#2563eb]" href="#">Business</a><a class="block rounded-[7px] py-[7px] pr-[13px] pl-[26px] text-[.85rem] no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] text-[#475569] hover:bg-[#f1f5f9] hover:text-[#0f172a] aria-[current=page]:bg-[#eff6ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#2563eb]" href="#">Portfolio</a><a class="block rounded-[7px] py-[7px] pr-[13px] pl-[26px] text-[.85rem] no-underline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-[#2563eb] text-[#475569] hover:bg-[#f1f5f9] hover:text-[#0f172a] aria-[current=page]:bg-[#eff6ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#2563eb]" href="#">Blog</a></div>
</details>
</nav>
</div>

About this set

Two accordion patterns for documentation and navigation. Nested places a second accordion inside an open panel: the inner items use a lighter grey card, a smaller medium-weight title and tighter padding, so the hierarchy is clear without indentation, and each inner chevron responds only to its own panel. Sidebar navigation turns the accordion into a menu of collapsible groups, such as Components and Templates, each holding a list of links; the header gets rounded hover fills and the links are indented under it, with the current page marked in blue. Use the nested pattern for sub-topics inside a help article and the sidebar for a docs or dashboard navigation column up to about 290px wide. The plain CSS and Tailwind versions are nested native details elements with no script. The Bootstrap version nests one .accordion inside another and fills the sidebar panels with Bootstrap’s .nav.flex-column and .nav-link, restyled through the –bs-nav-link-* variables.

What’s included

  • Nested accordion with lighter inner cards
  • Sidebar menu with collapsible link groups inside a nav landmark
  • Current page marked with aria-current="page"
  • Inner chevrons react only to their own panel
  • Bootstrap version uses nested .accordion and .nav.flex-column

Accessibility

The sidebar is a nav element with an aria-label, and the current link carries aria-current="page". Headers are summary elements, or buttons with aria-expanded and aria-controls in Bootstrap, and nested headers are reachable in normal Tab order. Headers and links show a 2px blue focus outline, and transitions are removed under prefers-reduced-motion.

Customise it

Change the --acc-* properties on .acc and the colours in the .acc-nest and .acc-side rules. In Bootstrap adjust the --bs-accordion-* variables on .acc-inner and .acc-side and the --bs-nav-link-* variables on .nav; in Tailwind edit the colour classes and the aria-[current=page]: variants on the links.