Nested Accordion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

<!--
Snippet Name: Nested Accordion
Description: Two-level documentation tree. Chapters expand to reveal nested page lists, then individual pages expand their content.
Author: DevSnips Contributors
Usage Example: Sidebar-adjacent docs navigation or a "on this page" hierarchical index.
-->
<div class="space-y-1.5" data-accordion="nested">
  <!-- Chapter 1 -->
  <div class="overflow-hidden rounded-lg border border-gray-200 bg-white" data-accordion-item>
    <h3>
      <button type="button" id="nested-trigger-1" aria-controls="nested-panel-1" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-2.5 px-3.5 py-3 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset rounded-lg">
        <svg class="accordion-chevron h-4 w-4 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-sm font-semibold text-gray-900">Getting Started</span>
        <span class="ml-auto rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-500">4</span>
      </button>
    </h3>
    <div id="nested-panel-1" role="region" aria-labelledby="nested-trigger-1" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="space-y-0.5 border-t border-gray-100 p-2">
          <li><a href="#" class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-blue-700 bg-blue-50"><span class="h-1.5 w-1.5 rounded-full bg-blue-600"></span> Introduction</a></li>
          <li><a href="#" class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900"><span class="h-1.5 w-1.5 rounded-full bg-gray-300"></span> Installation</a></li>
          <li><a href="#" class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900"><span class="h-1.5 w-1.5 rounded-full bg-gray-300"></span> Project structure</a></li>
          <li>
            <!-- Nested sub-accordion -->
            <div class="ml-1 mt-0.5" data-accordion-item>
              <button type="button" id="nested-sub-trigger-1" aria-controls="nested-sub-panel-1" aria-expanded="false" class="accordion-trigger sub-trigger flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-left text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
                <svg class="accordion-chevron h-3.5 w-3.5 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                <span>Configuration</span>
                <span class="ml-auto rounded-full bg-gray-100 px-1.5 py-0.5 text-[10px] font-medium text-gray-500">new</span>
              </button>
              <div id="nested-sub-panel-1" role="region" aria-labelledby="nested-sub-trigger-1" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
                <div class="overflow-hidden">
                  <ul class="ml-4 space-y-0.5 border-l border-gray-200 pl-2 pt-1">
                    <li><a href="#" class="block rounded-md px-2.5 py-1.5 text-[13px] text-gray-500 hover:bg-gray-50 hover:text-gray-900">Environment variables</a></li>
                    <li><a href="#" class="block rounded-md px-2.5 py-1.5 text-[13px] text-gray-500 hover:bg-gray-50 hover:text-gray-900">Theming & tokens</a></li>
                    <li><a href="#" class="block rounded-md px-2.5 py-1.5 text-[13px] text-gray-500 hover:bg-gray-50 hover:text-gray-900">CLI reference</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Chapter 2 -->
  <div class="overflow-hidden rounded-lg border border-gray-200 bg-white" data-accordion-item>
    <h3>
      <button type="button" id="nested-trigger-2" aria-controls="nested-panel-2" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-2.5 px-3.5 py-3 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset rounded-lg">
        <svg class="accordion-chevron h-4 w-4 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-sm font-semibold text-gray-900">Components</span>
        <span class="ml-auto rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-500">12</span>
      </button>
    </h3>
    <div id="nested-panel-2" role="region" aria-labelledby="nested-trigger-2" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="space-y-0.5 border-t border-gray-100 p-2">
          <li><a href="#" class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900"><span class="h-1.5 w-1.5 rounded-full bg-gray-300"></span> Buttons</a></li>
          <li><a href="#" class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900"><span class="h-1.5 w-1.5 rounded-full bg-gray-300"></span> Cards</a></li>
          <li><a href="#" class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900"><span class="h-1.5 w-1.5 rounded-full bg-gray-300"></span> Forms</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Chapter 3 -->
  <div class="overflow-hidden rounded-lg border border-gray-200 bg-white" data-accordion-item>
    <h3>
      <button type="button" id="nested-trigger-3" aria-controls="nested-panel-3" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-2.5 px-3.5 py-3 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset rounded-lg">
        <svg class="accordion-chevron h-4 w-4 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
        <span class="text-sm font-semibold text-gray-900">Deployment</span>
        <span class="ml-auto rounded-full bg-gray-100 px-2 py-0.5 text-[11px] font-medium text-gray-500">6</span>
      </button>
    </h3>
    <div id="nested-panel-3" role="region" aria-labelledby="nested-trigger-3" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="space-y-0.5 border-t border-gray-100 p-2">
          <li><a href="#" class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900"><span class="h-1.5 w-1.5 rounded-full bg-gray-300"></span> Hosting providers</a></li>
          <li><a href="#" class="flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-gray-600 hover:bg-gray-50 hover:text-gray-900"><span class="h-1.5 w-1.5 rounded-full bg-gray-300"></span> CI/CD pipelines</a></li>
        </ul>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.currentScript.closest('[data-accordion]');
      if (!root) return;
      root.querySelectorAll('[data-accordion-item]').forEach((item) => {
        const trigger = item.querySelector('.accordion-trigger');
        const panel = item.querySelector('.accordion-panel');
        const chevron = trigger ? trigger.querySelector('.accordion-chevron') : null;
        if (!trigger || !panel) return;
        const toggle = () => {
          const open = trigger.getAttribute('aria-expanded') === 'true';
          trigger.setAttribute('aria-expanded', String(!open));
          panel.classList.toggle('grid-rows-[1fr]', !open);
          panel.classList.toggle('grid-rows-[0fr]', open);
          if (chevron) chevron.style.transform = open ? '' : 'rotate(90deg)';
        };
        trigger.addEventListener('click', toggle);
      });
    })();
  </script>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

# Nested Accordion

Two-level nested accordion for hierarchical content.

## Usage
```bash
npx devsnips add Tailwind/Components/Accordions/nested-accordion
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`