# Accordion / Acordeón

> Sections that open and close. Works without JavaScript.

Page: https://componentes-lovat.vercel.app/c/accordion/  
License: MIT · Design: coss ui (MIT) · accordion.tsx  
Requires: tokens.css  
Context: ambos · Density: media · Tone: sobria

## Files

- Tokens (once): https://componentes-lovat.vercel.app/tokens.css
- HTML: https://componentes-lovat.vercel.app/raw/accordion/accordion.html
- CSS: https://componentes-lovat.vercel.app/raw/accordion/accordion.css
- Everything in one file: https://componentes-lovat.vercel.app/r/accordion.html

Dark theme: add class `dark` to `<html>`.

## When to use

- For FAQs and long panels.

## When not to use

- For the main content.

## Accessibility

Roles: group, button (summary)

| Keys | Action |
|---|---|
| Enter / Espacio | Opens or closes |

- It is native <details>: the browser announces expanded or collapsed.
- With the same name, opening one closes the others.
- Height animates in Chrome 131+ (interpolate-size).

## Code

```html
<div class="c-accordion">
  <details class="c-accordion__item" name="faq" open>
    <summary class="c-accordion__trigger">¿Qué es Componentes?<svg class="c-accordion__indicator" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
    <div class="c-accordion__panel"><div class="c-accordion__content">Una colección de componentes web en HTML, CSS y JavaScript, sin dependencias, listos para copiar.</div></div>
  </details>
  <details class="c-accordion__item" name="faq">
    <summary class="c-accordion__trigger">¿Puedo usarlos en proyectos comerciales?<svg class="c-accordion__indicator" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
    <div class="c-accordion__panel"><div class="c-accordion__content">Sí. El código tiene licencia MIT: úsalo y cita la fuente.</div></div>
  </details>
  <details class="c-accordion__item" name="faq">
    <summary class="c-accordion__trigger">¿Funcionan sin JavaScript?<svg class="c-accordion__indicator" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></summary>
    <div class="c-accordion__panel"><div class="c-accordion__content">Este sí: es el elemento details del navegador. Con el mismo name, abrir uno cierra los demás.</div></div>
  </details>
</div>
```

```css
/* accordion · Componentes (MIRÓ Labs). Diseño de coss ui (MIT, © coss.com, antes Origin UI).
   Generado por tools/build_css.py desde accordion.tw.json. No editar a mano. Necesita tokens.css. */
.c-accordion__indicator{pointer-events:none}
.c-accordion__trigger{display:flex}
.c-accordion__indicator{width:calc(var(--spacing)*4);height:calc(var(--spacing)*4)}
.c-accordion{width:100%;max-width:var(--container-md)}
.c-accordion__trigger{flex:1}
.c-accordion__indicator{flex-shrink:0;--tw-translate-y:calc(var(--spacing)*.5);translate:var(--tw-translate-x)var(--tw-translate-y)}
.c-accordion__trigger{cursor:pointer;align-items:flex-start;justify-content:space-between;gap:calc(var(--spacing)*4)}
.c-accordion__panel{overflow:hidden}
.c-accordion__trigger{border-radius:calc(var(--radius) - 2px)}
.c-accordion__item{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}
.c-accordion__trigger{padding-block:calc(var(--spacing)*4)}
.c-accordion__content{padding-top:calc(var(--spacing)*0);padding-bottom:calc(var(--spacing)*4)}
.c-accordion__trigger{text-align:left;font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-accordion__panel{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}
.c-accordion__trigger{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}
.c-accordion__panel{color:var(--muted-foreground)}
.c-accordion__indicator{opacity:.8}
.c-accordion__trigger{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}
.c-accordion__indicator{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));--tw-duration:.2s;transition-duration:.2s;--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}
.c-accordion__trigger{--tw-outline-style:none;outline-style:none}
.c-accordion__item:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}
.c-accordion__trigger:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--ring)}
/* propio */
.c-accordion__trigger{list-style:none}
.c-accordion__trigger::-webkit-details-marker{display:none}
.c-accordion__item[open]>.c-accordion__trigger .c-accordion__indicator{rotate:180deg}
/* Altura animada donde el navegador lo permite (Chrome 131+); en los demás abre sin animar. */
@supports (interpolate-size: allow-keywords){
 .c-accordion{interpolate-size:allow-keywords}
 .c-accordion__item::details-content{height:0;overflow:hidden;transition:height .2s ease-in-out,content-visibility .2s allow-discrete}
 .c-accordion__item[open]::details-content{height:auto}
}
```

## Credits

- coss ui (MIT) · accordion.tsx: https://coss.com/ui
- W3C WAI-ARIA APG, Accordion: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/