Accordion

Collapsible content sections built on the native HTML details/summary pattern.

The accordion component uses the native <details> element, so it works without JavaScript.

Preview

What is Luminary UI?

Luminary UI is a CSS framework based on zero-class semantic overrides and glassmorphism.

Does it require JavaScript?

No. The accordion uses native HTML <details> elements, which toggle without JS.

Can I customize the colors?

Yes. Override the CSS custom properties on :root to change any visual aspect.

Usage

<div class="glass-accordion">
  <details class="glass-accordion-item">
    <summary>Question 1</summary>
    <div class="accordion-content">
      Answer to question 1.
    </div>
  </details>
  <details class="glass-accordion-item">
    <summary>Question 2</summary>
    <div class="accordion-content">
      Answer to question 2.
    </div>
  </details>
</div>

Structure

Element / Class	Purpose
`.glass-accordion`	Outer wrapper with glass material and rounded corners
`.glass-accordion-item`	Each collapsible section (use `<details>` element)
`summary`	The clickable header (auto-styled, no extra class needed)
`.accordion-content`	The expandable body content

Behavior

Closed: The summary shows an arrow (→) on the right
Open: The <details> [open] attribute triggers the arrow to rotate 90°, the summary gets a bottom border, and the content area fades in with a subtle background
Hover: Summary background brightens on hover
Items are separated by 1px solid var(--glass-border) borders; the last item has no bottom border

Compatible Modifiers

.thin / .thick — material weight
.vibrant — accent-tinted
.glow — outer glow