Basic 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
112
113
114
115

<!--
Snippet Name: Basic Accordion
Description: Simple documentation accordion with chevron rotation and smooth height animation.
Author: DevSnips Contributors
Usage Example: Drop into a docs/knowledge-base layout. Each item toggles independently.
-->
<div class="divide-y divide-gray-200 border-y border-gray-200" data-accordion="basic">
  <div class="group" data-accordion-item>
    <h3>
      <button
        type="button"
        id="basic-trigger-1"
        aria-controls="basic-panel-1"
        aria-expanded="false"
        class="accordion-trigger flex w-full items-center justify-between gap-4 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded-md"
      >
        <span class="text-sm font-medium text-gray-900">Getting started with the CLI</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="basic-panel-1"
      role="region"
      aria-labelledby="basic-trigger-1"
      class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out"
    >
      <div class="overflow-hidden">
        <div class="pb-4 pr-8 text-sm leading-relaxed text-gray-600">
          Install the CLI from npm, then run <code class="rounded bg-gray-100 px-1.5 py-0.5 text-[13px] font-medium text-gray-800">devsnips init</code> to scaffold a new project. This creates a folder structure that matches the component family layout used across the library.
        </div>
      </div>
    </div>
  </div>

  <div class="group" data-accordion-item>
    <h3>
      <button
        type="button"
        id="basic-trigger-2"
        aria-controls="basic-panel-2"
        aria-expanded="false"
        class="accordion-trigger flex w-full items-center justify-between gap-4 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded-md"
      >
        <span class="text-sm font-medium text-gray-900">Configuring environment variables</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="basic-panel-2"
      role="region"
      aria-labelledby="basic-trigger-2"
      class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out"
    >
      <div class="overflow-hidden">
        <div class="pb-4 pr-8 text-sm leading-relaxed text-gray-600">
          Copy the example file to <code class="rounded bg-gray-100 px-1.5 py-0.5 text-[13px] font-medium text-gray-800">.env.local</code> and fill in your API keys. Variables are loaded automatically and validated at startup, so the app fails fast if a required value is missing.
        </div>
      </div>
    </div>
  </div>

  <div class="group" data-accordion-item>
    <h3>
      <button
        type="button"
        id="basic-trigger-3"
        aria-controls="basic-panel-3"
        aria-expanded="false"
        class="accordion-trigger flex w-full items-center justify-between gap-4 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded-md"
      >
        <span class="text-sm font-medium text-gray-900">Deploying to production</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="basic-panel-3"
      role="region"
      aria-labelledby="basic-trigger-3"
      class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out"
    >
      <div class="overflow-hidden">
        <div class="pb-4 pr-8 text-sm leading-relaxed text-gray-600">
          Push to the <code class="rounded bg-gray-100 px-1.5 py-0.5 text-[13px] font-medium text-gray-800">main</code> branch to trigger the preview pipeline. Once CI passes and a reviewer approves, promote the preview to production from the dashboard with a single click.
        </div>
      </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
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

# Basic Accordion

Simple documentation-style accordion with chevron rotation and smooth height animation via CSS grid. Each item toggles independently. Useful for knowledge bases, docs pages, FAQs, and any collapsible content list.

## Preview

The preview demonstrates three independent accordion items with typical documentation questions. Clicking a trigger expands/collapses its panel with a 300ms ease-out transition and rotates the chevron.

## Features

- Independent item toggles (multiple can be open)
- Chevron rotation on open/close
- Smooth height animation using `grid-rows-[0fr]` / `grid-rows-[1fr]`
- Focus-visible rings on triggers
- Proper ARIA: `aria-expanded`, `aria-controls`, `role="region"`, `aria-labelledby`
- Semantic headings (`h3`) wrapping each trigger button
- Minimal visual style: divide-y borders, muted text

## Usage

```bash
npx devsnips add Tailwind/Components/Accordions/basic-accordion
```

This installs the component files into your project. Copy the markup from `code.html` into any page that has Tailwind CSS available. The inline `<script>` initializes the toggles for the nearest `[data-accordion]` root; no external JS libraries are required.

## Customization

- **Colors**: Change `text-gray-900`, `text-gray-600`, `divide-gray-200`, `border-gray-200`, and the focus ring color (`ring-blue-500`).
- **Spacing**: Adjust `py-4`, `pb-4`, `gap-4`, `pr-8`.
- **Typography**: Modify `text-sm`, `font-medium`, `leading-relaxed`.
- **Animation**: The duration/easing lives on `.accordion-panel` (`duration-300 ease-out`) and the chevron `transition-transform`.
- **Borders**: The outer `border-y` and item `divide-y` can be removed or restyled.

## Accessibility

- Triggers are real `<button type="button">` elements inside `<h3>` headings.
- Each panel is a `role="region"` with `aria-labelledby` pointing to its trigger.
- `aria-expanded` is toggled by the script.
- Focus-visible rings provide a clear keyboard focus indicator.
- Chevron SVG is marked `aria-hidden="true"`.

## Responsive Behavior

Fluid width (`w-full`). Text wraps naturally. No special breakpoint classes; the layout remains a vertical stack at all viewport sizes.

## Dependencies

- Tailwind CSS (utility classes)
- No external JavaScript libraries
- No icon libraries (inline SVG)
- No fonts beyond the page default

Dependency-free beyond Tailwind.

## File Structure

- `code.html` — copy/paste component snippet (includes the small initialization script)
- `preview.html` — standalone preview/demo page
- `metadata.json` — component metadata
- `README.md` — this documentation

## Notes

- The script scopes itself to the nearest `[data-accordion]` ancestor so multiple instances can coexist on a page.
- Animation relies on the modern `grid-template-rows` transition; older browsers without support will simply snap open/closed.
- Content inside panels should not rely on the panel being visible for layout calculations during the closed state.