Glass 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

<!--
Snippet Name: Glass Accordion
Description: Glassmorphism accordion with frosted translucent panels, hairline white borders, and soft inner highlights over a vivid backdrop.
Author: DevSnips Contributors
Usage Example: Hero sections, AI product pages, or any context with a colorful background that deserves a frosted overlay.
-->
<div class="space-y-3" data-accordion="glass">
  <div class="rounded-2xl border border-white/20 bg-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.12)] backdrop-blur-xl transition-colors hover:bg-white/15" data-accordion-item>
    <h3>
      <button type="button" id="glass-trigger-1" aria-controls="glass-panel-1" aria-expanded="false" class="accordion-trigger flex w-full items-center justify-between gap-4 px-5 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent rounded-2xl">
        <span class="text-sm font-semibold text-white">How does the AI assistant understand my codebase?</span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-white/60 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="glass-panel-1" role="region" aria-labelledby="glass-trigger-1" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <p class="px-5 pb-5 text-sm leading-relaxed text-white/70">The assistant indexes your repository locally, respecting gitignore and access controls. It builds a semantic map of symbols and dependencies so answers reference real files, not guesses, and every suggestion links back to the exact source line.</p>
      </div>
    </div>
  </div>

  <div class="rounded-2xl border border-white/20 bg-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.12)] backdrop-blur-xl transition-colors hover:bg-white/15" data-accordion-item>
    <h3>
      <button type="button" id="glass-trigger-2" aria-controls="glass-panel-2" aria-expanded="false" class="accordion-trigger flex w-full items-center justify-between gap-4 px-5 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent rounded-2xl">
        <span class="text-sm font-semibold text-white">Is my code sent to third-party models?</span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-white/60 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="glass-panel-2" role="region" aria-labelledby="glass-trigger-2" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <p class="px-5 pb-5 text-sm leading-relaxed text-white/70">Never without your explicit opt-in. By default all inference runs on your own infrastructure or a zero-retention endpoint. Telemetry is anonymized and you can disable it entirely from the admin console.</p>
      </div>
    </div>
  </div>

  <div class="rounded-2xl border border-white/20 bg-white/10 shadow-[0_8px_32px_rgba(0,0,0,0.12)] backdrop-blur-xl transition-colors hover:bg-white/15" data-accordion-item>
    <h3>
      <button type="button" id="glass-trigger-3" aria-controls="glass-panel-3" aria-expanded="false" class="accordion-trigger flex w-full items-center justify-between gap-4 px-5 py-4 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent rounded-2xl">
        <span class="text-sm font-semibold text-white">Can it work fully offline?</span>
        <svg class="accordion-chevron h-5 w-5 shrink-0 text-white/60 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="glass-panel-3" role="region" aria-labelledby="glass-trigger-3" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <p class="px-5 pb-5 text-sm leading-relaxed text-white/70">Yes. A self-hosted runtime bundles a compact local model so the assistant keeps working behind a firewall or in air-gapped environments. Cloud features simply grey out gracefully when no connection is available.</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 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

# Glass Accordion

Glassmorphism accordion.

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

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