# Accordion
Agrupa secciones relacionadas de contenido que se pueden abrir y cerrar para administrar la densidad de información.
```tsx
import { Accordion, AccordionHeader, AccordionItem, AccordionPanel } from "@fluentui/react-components";
What is Lexy Design?
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Duis aute irure dolor in reprehenderit in voluptate...
How do I get started?
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Where can I learn more?
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
```
## Descripción general
Los acordeones disminuyen la carga cognitiva al permitir que las personas elijan qué secciones de contenido desean ver, similar a las preguntas en una sección de preguntas frecuentes.
Nunca pongas información requerida para la tarea actual dentro de un acordeón. Considera un tratamiento que le dé más prominencia.
## Cuándo usar
### ✓ Usa acordeones cuando
- Necesitas organizar contenido extenso en secciones escaneables
- El usuario no necesita ver toda la información al mismo tiempo
- Quieres reducir el desplazamiento vertical en la página
- Tienes secciones de preguntas frecuentes o ayuda contextual
### ✗ Evita acordeones cuando
- El contenido es breve y cabe cómodamente en la vista
- La información de una sección depende de otra sección
- El usuario necesita comparar información entre secciones
- El contenido es crítico para completar una tarea
## Comportamiento
### Cerrado por defecto
Por defecto, los elementos del acordeón están cerrados. Usa `collapsible` para que un panel abierto pueda cerrarse con otro click en su encabezado.
### Múltiples elementos abiertos
Sin `multiple`, abrir un panel cierra cualquier otro panel abierto. Con `multiple`, varios paneles pueden permanecer abiertos al mismo tiempo.
## Ejemplos
### Default
Un acordeón simple donde cada panel se puede abrir o cerrar.
```tsx
What is a design system?
Lorem ipsum dolor sit amet...
Duis aute irure dolor...
```
### Expanded
Panel abierto por defecto usando `defaultOpenItems`.
```tsx
Why use components?
Lorem ipsum dolor sit amet...
Duis aute irure dolor...
```
### Multiple
Permite que múltiples paneles estén abiertos simultáneamente.
```tsx
Typography
Lorem ipsum dolor sit amet...
Color
Lorem ipsum dolor sit amet...
Spacing
Lorem ipsum dolor sit amet...
```
### Small
Contenido más compacto con menos texto.
```tsx
How do I get started?
Lorem ipsum dolor sit amet...
```
## Accesibilidad
Los encabezados del acordeón tienen un rol de botón que los hace perceptibles para las tecnologías de asistencia. Cuando un elemento del acordeón está abierto, sus propiedades `aria-expanded` y `active` deben establecerse en true.
### Navegación por teclado
- **Tab/Shift+Tab:** Navega entre los encabezados del acordeón
- **Enter/Space:** Expande o colapsa el panel actual
- **Flecha Arriba/Abajo:** Mueve el foco entre encabezados
- **Home/End:** Mueve el foco al primer/último encabezado