Sidebar 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

<!--
Snippet Name: Sidebar Accordion
Description: Documentation navigation sidebar. Category groups expand to reveal link lists with an active-item marker. Multi-open with section counts.
Author: DevSnips Contributors
Usage Example: Left-rail docs navigation; keep multiple sections open while reading.
-->
<nav class="space-y-1.5" aria-label="Documentation" data-accordion="sidebar">
  <div data-accordion-item>
    <button type="button" id="side-trigger-1" aria-controls="side-panel-1" aria-expanded="true" class="accordion-trigger group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
      <svg class="accordion-chevron h-4 w-4 shrink-0 text-gray-400 transition-transform duration-300 ease-out" style="transform: rotate(90deg)" 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>Getting Started</span>
      <span class="ml-auto text-[11px] font-medium text-gray-400">4</span>
    </button>
    <div id="side-panel-1" role="region" aria-labelledby="side-trigger-1" class="accordion-panel grid grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="mt-1 space-y-0.5 border-l border-gray-200 pl-3 ml-4">
          <li><a href="#" aria-current="page" class="flex items-center gap-2 rounded-md -ml-3 border-l-2 border-blue-500 bg-blue-50/60 py-1.5 pl-3 pr-2 text-sm text-blue-700">Introduction</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Installation</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Project structure</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Theming</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div data-accordion-item>
    <button type="button" id="side-trigger-2" aria-controls="side-panel-2" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
      <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>Components</span>
      <span class="ml-auto text-[11px] font-medium text-gray-400">12</span>
    </button>
    <div id="side-panel-2" role="region" aria-labelledby="side-trigger-2" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="mt-1 space-y-0.5 border-l border-gray-200 pl-3 ml-4">
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Buttons</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Cards</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Accordions</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div data-accordion-item>
    <button type="button" id="side-trigger-3" aria-controls="side-panel-3" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
      <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>API Reference</span>
      <span class="ml-auto text-[11px] font-medium text-gray-400">8</span>
    </button>
    <div id="side-panel-3" role="region" aria-labelledby="side-trigger-3" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="mt-1 space-y-0.5 border-l border-gray-200 pl-3 ml-4">
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Authentication</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Endpoints</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Webhooks</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div data-accordion-item>
    <button type="button" id="side-trigger-4" aria-controls="side-panel-4" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
      <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>Guides</span>
      <span class="ml-auto text-[11px] font-medium text-gray-400">6</span>
    </button>
    <div id="side-panel-4" role="region" aria-labelledby="side-trigger-4" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="mt-1 space-y-0.5 border-l border-gray-200 pl-3 ml-4">
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Deployment</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Testing</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>
</nav>

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

# Sidebar Accordion

Sidebar navigation accordion.

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

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