Icon 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

<!--
Snippet Name: Icon Accordion
Description: Accordion with leading category icons in tinted squares, supporting a clean two-line header.
Author: DevSnips Contributors
Usage Example: Knowledge base / support center where each section maps to a topic icon.
-->
<div class="space-y-2.5" data-accordion="icon">
  <div class="rounded-xl border border-gray-200 bg-white" data-accordion-item>
    <h3>
      <button type="button" id="icon-trigger-1" aria-controls="icon-panel-1" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-4 px-4 py-3.5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-inset rounded-xl">
        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 transition-colors group-hover:bg-indigo-100">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
        </span>
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-semibold text-gray-900">Account &amp; billing</span>
          <span class="block text-xs text-gray-500">Login, passwords, invoices, and plan changes</span>
        </span>
        <svg class="accordion-chevron h-5 w-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="M19 9l-7 7-7-7"/></svg>
      </button>
    </h3>
    <div id="icon-panel-1" role="region" aria-labelledby="icon-trigger-1" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="border-t border-gray-100 px-4 py-2 text-sm">
          <li><a href="#" class="flex items-center justify-between py-2 text-gray-600 hover:text-indigo-600"><span>How do I reset my password?</span><svg class="h-4 w-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a></li>
          <li><a href="#" class="flex items-center justify-between py-2 text-gray-600 hover:text-indigo-600"><span>Where can I download my invoices?</span><svg class="h-4 w-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a></li>
          <li><a href="#" class="flex items-center justify-between py-2 text-gray-600 hover:text-indigo-600"><span>How do I cancel my subscription?</span><svg class="h-4 w-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="rounded-xl border border-gray-200 bg-white" data-accordion-item>
    <h3>
      <button type="button" id="icon-trigger-2" aria-controls="icon-panel-2" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-4 px-4 py-3.5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-inset rounded-xl">
        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 transition-colors group-hover:bg-emerald-100">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
        </span>
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-semibold text-gray-900">Developers &amp; API</span>
          <span class="block text-xs text-gray-500">Keys, webhooks, SDKs, and rate limits</span>
        </span>
        <svg class="accordion-chevron h-5 w-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="M19 9l-7 7-7-7"/></svg>
      </button>
    </h3>
    <div id="icon-panel-2" role="region" aria-labelledby="icon-trigger-2" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="border-t border-gray-100 px-4 py-2 text-sm">
          <li><a href="#" class="flex items-center justify-between py-2 text-gray-600 hover:text-emerald-600"><span>How do I generate an API key?</span><svg class="h-4 w-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a></li>
          <li><a href="#" class="flex items-center justify-between py-2 text-gray-600 hover:text-emerald-600"><span>What are the rate limits?</span><svg class="h-4 w-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a></li>
          <li><a href="#" class="flex items-center justify-between py-2 text-gray-600 hover:text-emerald-600"><span>Which SDKs are officially supported?</span><svg class="h-4 w-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="rounded-xl border border-gray-200 bg-white" data-accordion-item>
    <h3>
      <button type="button" id="icon-trigger-3" aria-controls="icon-panel-3" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-4 px-4 py-3.5 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-inset rounded-xl">
        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-amber-50 text-amber-600 transition-colors group-hover:bg-amber-100">
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.879 9.879L6.343 6.343m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        </span>
        <span class="min-w-0 flex-1">
          <span class="block text-sm font-semibold text-gray-900">Troubleshooting</span>
          <span class="block text-xs text-gray-500">Common errors, sync issues, and diagnostics</span>
        </span>
        <svg class="accordion-chevron h-5 w-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="M19 9l-7 7-7-7"/></svg>
      </button>
    </h3>
    <div id="icon-panel-3" role="region" aria-labelledby="icon-trigger-3" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="border-t border-gray-100 px-4 py-2 text-sm">
          <li><a href="#" class="flex items-center justify-between py-2 text-gray-600 hover:text-amber-600"><span>Why is my sync stuck?</span><svg class="h-4 w-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></a></li>
          <li><a href="#" class="flex items-center justify-between py-2 text-gray-600 hover:text-amber-600"><span>How do I clear the cache?</span><svg class="h-4 w-4 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg></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 = item.querySelector('.accordion-chevron');
        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(180deg)';
        };
        trigger.addEventListener('click', toggle);
      });
    })();
  </script>
</div>

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

# Icon Accordion

Accordion with leading category icons.

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

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