FAQ 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
107
108
109
110
111

<!--
Snippet Name: FAQ Accordion
Description: Landing-page FAQ with numbered badges, category chips, and a contact CTA. Single-open behavior with smooth height animation.
Author: DevSnips Contributors
Usage Example: Product landing pages where only one answer shows at a time.
-->
<div class="space-y-3" data-accordion="faq" data-single-open>
  <div class="group rounded-2xl border border-gray-200 bg-white p-5 transition-all duration-300 hover:border-gray-300 hover:shadow-sm" data-accordion-item>
    <h3>
      <button type="button" id="faq-trigger-1" aria-controls="faq-panel-1" aria-expanded="false" class="accordion-trigger flex w-full items-start gap-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 rounded-xl">
        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-violet-50 text-xs font-semibold text-violet-700">01</span>
        <span class="min-w-0 flex-1 pt-0.5">
          <span class="block text-[15px] font-semibold text-gray-900">What makes DevSnips different from a UI kit?</span>
          <span class="mt-0.5 block text-xs text-gray-400">Product</span>
        </span>
        <svg class="accordion-chevron mt-0.5 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="faq-panel-1" role="region" aria-labelledby="faq-trigger-1" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <p class="pl-11 pt-3 text-sm leading-relaxed text-gray-600">Unlike a UI kit that ships bundled components, DevSnips gives you copy-paste snippets organized by family. You adopt only what you need, keep full control of your markup, and never inherit a runtime dependency or global stylesheet.</p>
      </div>
    </div>
  </div>

  <div class="group rounded-2xl border border-gray-200 bg-white p-5 transition-all duration-300 hover:border-gray-300 hover:shadow-sm" data-accordion-item>
    <h3>
      <button type="button" id="faq-trigger-2" aria-controls="faq-panel-2" aria-expanded="false" class="accordion-trigger flex w-full items-start gap-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 rounded-xl">
        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-violet-50 text-xs font-semibold text-violet-700">02</span>
        <span class="min-w-0 flex-1 pt-0.5">
          <span class="block text-[15px] font-semibold text-gray-900">Do I need a build step or framework?</span>
          <span class="mt-0.5 block text-xs text-gray-400">Workflow</span>
        </span>
        <svg class="accordion-chevron mt-0.5 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="faq-panel-2" role="region" aria-labelledby="faq-trigger-2" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <p class="pl-11 pt-3 text-sm leading-relaxed text-gray-600">No. Every snippet is plain HTML and Tailwind classes with a sprinkle of vanilla JavaScript for interactivity. Drop it into any project, static site, or framework, the only requirement is Tailwind in your stylesheet.</p>
      </div>
    </div>
  </div>

  <div class="group rounded-2xl border border-gray-200 bg-white p-5 transition-all duration-300 hover:border-gray-300 hover:shadow-sm" data-accordion-item>
    <h3>
      <button type="button" id="faq-trigger-3" aria-controls="faq-panel-3" aria-expanded="false" class="accordion-trigger flex w-full items-start gap-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 rounded-xl">
        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-violet-50 text-xs font-semibold text-violet-700">03</span>
        <span class="min-w-0 flex-1 pt-0.5">
          <span class="block text-[15px] font-semibold text-gray-900">Is it really free for commercial use?</span>
          <span class="mt-0.5 block text-xs text-gray-400">Licensing</span>
        </span>
        <svg class="accordion-chevron mt-0.5 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="faq-panel-3" role="region" aria-labelledby="faq-trigger-3" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <p class="pl-11 pt-3 text-sm leading-relaxed text-gray-600">Yes. DevSnips is MIT-licensed, so you can use it in client work, paid products, and internal tools without attribution. A Pro tier exists only for premium layouts, never for the core library.</p>
      </div>
    </div>
  </div>

  <div class="group rounded-2xl border border-gray-200 bg-white p-5 transition-all duration-300 hover:border-gray-300 hover:shadow-sm" data-accordion-item>
    <h3>
      <button type="button" id="faq-trigger-4" aria-controls="faq-panel-4" aria-expanded="false" class="accordion-trigger flex w-full items-start gap-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-violet-500 focus-visible:ring-offset-2 rounded-xl">
        <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-violet-50 text-xs font-semibold text-violet-700">04</span>
        <span class="min-w-0 flex-1 pt-0.5">
          <span class="block text-[15px] font-semibold text-gray-900">How often is the library updated?</span>
          <span class="mt-0.5 block text-xs text-gray-400">Roadmap</span>
        </span>
        <svg class="accordion-chevron mt-0.5 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="faq-panel-4" role="region" aria-labelledby="faq-trigger-4" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <p class="pl-11 pt-3 text-sm leading-relaxed text-gray-600">New families and variants ship every two weeks. Subscribe to the changelog for a diff of every release, or watch the repository to get notified the moment a new component lands.</p>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.currentScript.closest('[data-accordion]');
      if (!root) return;
      const singleOpen = root.hasAttribute('data-single-open');
      const items = Array.from(root.querySelectorAll('[data-accordion-item]'));
      items.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 close = () => {
          trigger.setAttribute('aria-expanded', 'false');
          panel.classList.remove('grid-rows-[1fr]');
          panel.classList.add('grid-rows-[0fr]');
          if (chevron) chevron.style.transform = '';
        };
        const open = () => {
          trigger.setAttribute('aria-expanded', 'true');
          panel.classList.add('grid-rows-[1fr]');
          panel.classList.remove('grid-rows-[0fr]');
          if (chevron) chevron.style.transform = 'rotate(180deg)';
        };
        trigger.addEventListener('click', () => {
          const isOpen = trigger.getAttribute('aria-expanded') === 'true';
          if (singleOpen) items.forEach((o) => { if (o !== item) { const t = o.querySelector('.accordion-trigger'); const p = o.querySelector('.accordion-panel'); const c = o.querySelector('.accordion-chevron'); t.setAttribute('aria-expanded','false'); p.classList.remove('grid-rows-[1fr]'); p.classList.add('grid-rows-[0fr]'); if (c) c.style.transform=''; } });
          isOpen ? close() : open();
        });
      });
    })();
  </script>
</div>

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

# FAQ Accordion

FAQ-oriented accordion layout.

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

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