Data Display accordiondataglass

Glass Accordion

Expandable content sections with a subtle glass effect and smooth transitions.

How do I install the components?
Simply copy the Astro and CSS code into your project.
Is this open source?
Yes, Astro Components is free under the MIT license.

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { GlassAccordion } from 'astro-component-kit';
---

<AccordionGroupGlass>Content</AccordionGroupGlass>
--- import { GlassAccordion } from 'astro-component-kit'; --- <AccordionGroupGlass>Content</AccordionGroupGlass>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GlassAccordion.astro and paste the following code:

astro 
---
---
<div class="acc-wrap">
  <details open>
    <summary>How do I install the components?</summary>
    <div class="content">Simply copy the Astro and CSS code into your project.</div>
  </details>
  <details>
    <summary>Is this open source?</summary>
    <div class="content">Yes, Astro Components is free under the MIT license.</div>
  </details>
</div>
<style>
  .acc-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
  details { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; }
  summary { padding: 1rem 1.5rem; cursor: pointer; color: #fff; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; }
  summary:hover { background: rgba(255,255,255,0.02); }
  summary::after { content: "+"; font-size: 1.25rem; transition: transform 0.3s; }
  details[open] summary::after { transform: rotate(45deg); }
  .content { padding: 0 1.5rem 1rem; color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }
</style>
--- --- <div class="acc-wrap"> <details open> <summary>How do I install the components?</summary> <div class="content">Simply copy the Astro and CSS code into your project.</div> </details> <details> <summary>Is this open source?</summary> <div class="content">Yes, Astro Components is free under the MIT license.</div> </details> </div> <style> .acc-wrap { display: flex; flex-direction: column; gap: 0.5rem; } details { background: rgba(255,255,255,0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; } summary { padding: 1rem 1.5rem; cursor: pointer; color: #fff; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: 0.2s; } summary:hover { background: rgba(255,255,255,0.02); } summary::after { content: "+"; font-size: 1.25rem; transition: transform 0.3s; } details[open] summary::after { transform: rotate(45deg); } .content { padding: 0 1.5rem 1rem; color: #94a3b8; font-size: 0.9rem; line-height: 1.6; } </style>

Quick Info

Category
Data Display
Filename
GlassAccordion.astro
Dependencies
None — pure Astro + CSS
Tags
accordiondataglass