Minimal 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

<!--
Snippet Name: Minimal Accordion
Description: Borderless, ultra-clean accordion with a plus/minus indicator. Typography-led hierarchy for modern SaaS UIs.
Author: DevSnips Contributors
Usage Example: Marketing or product pages where visual quietness matters.
-->
<div class="divide-y divide-gray-100" data-accordion="minimal">
  <div class="py-1" data-accordion-item>
    <h3>
      <button type="button" id="minimal-trigger-1" aria-controls="minimal-panel-1" aria-expanded="false" class="accordion-trigger group flex w-full items-center justify-between gap-6 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-4 rounded-sm">
        <span class="text-base font-medium text-gray-900 transition-colors group-hover:text-gray-600">What is included in the free plan?</span>
        <span class="relative flex h-5 w-5 shrink-0 items-center justify-center text-gray-400">
          <span class="absolute h-[1.5px] w-3 rounded-full bg-current transition-transform duration-300 ease-out accordion-minus-h"></span>
          <span class="absolute h-3 w-[1.5px] rounded-full bg-current transition-transform duration-300 ease-out accordion-plus-v"></span>
        </span>
      </button>
    </h3>
    <div id="minimal-panel-1" role="region" aria-labelledby="minimal-trigger-1" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <p class="max-w-prose pb-5 text-[15px] leading-relaxed text-gray-500">The free plan includes unlimited projects, three collaborators per workspace, and community support. There are no seat limits during your trial, so you can evaluate the full workflow before committing to a paid tier.</p>
      </div>
    </div>
  </div>

  <div class="py-1" data-accordion-item>
    <h3>
      <button type="button" id="minimal-trigger-2" aria-controls="minimal-panel-2" aria-expanded="false" class="accordion-trigger group flex w-full items-center justify-between gap-6 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-4 rounded-sm">
        <span class="text-base font-medium text-gray-900 transition-colors group-hover:text-gray-600">Can I change plans at any time?</span>
        <span class="relative flex h-5 w-5 shrink-0 items-center justify-center text-gray-400">
          <span class="absolute h-[1.5px] w-3 rounded-full bg-current transition-transform duration-300 ease-out accordion-minus-h"></span>
          <span class="absolute h-3 w-[1.5px] rounded-full bg-current transition-transform duration-300 ease-out accordion-plus-v"></span>
        </span>
      </button>
    </h3>
    <div id="minimal-panel-2" role="region" aria-labelledby="minimal-trigger-2" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <p class="max-w-prose pb-5 text-[15px] leading-relaxed text-gray-500">Yes. Upgrades apply immediately and we prorate the difference for the remainder of the billing cycle. Downgrades take effect at the start of your next cycle so you keep the features you paid for.</p>
      </div>
    </div>
  </div>

  <div class="py-1" data-accordion-item>
    <h3>
      <button type="button" id="minimal-trigger-3" aria-controls="minimal-panel-3" aria-expanded="false" class="accordion-trigger group flex w-full items-center justify-between gap-6 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900 focus-visible:ring-offset-4 rounded-sm">
        <span class="text-base font-medium text-gray-900 transition-colors group-hover:text-gray-600">How do you handle data ownership?</span>
        <span class="relative flex h-5 w-5 shrink-0 items-center justify-center text-gray-400">
          <span class="absolute h-[1.5px] w-3 rounded-full bg-current transition-transform duration-300 ease-out accordion-minus-h"></span>
          <span class="absolute h-3 w-[1.5px] rounded-full bg-current transition-transform duration-300 ease-out accordion-plus-v"></span>
        </span>
      </button>
    </h3>
    <div id="minimal-panel-3" role="region" aria-labelledby="minimal-trigger-3" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <p class="max-w-prose pb-5 text-[15px] leading-relaxed text-gray-500">You own your data, full stop. Export everything as JSON or CSV at any time, and deletion requests are processed within 30 days. We never sell user data or use it to train third-party models.</p>
      </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 vBar = item.querySelector('.accordion-plus-v');
        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 (vBar) vBar.style.transform = open ? '' : 'scaleY(0)';
        };
        trigger.addEventListener('click', toggle);
      });
    })();
  </script>
</div>

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

# Minimal Accordion

Borderless, typography-led accordion.

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

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