C6 · Componentes

Accordion

Seções colapsáveis para conteúdo denso ou perguntas frequentes. Dois modos: expand-único (FAQ) ou multi-expand (configurações). Trigger em peso 600 muda para acento quando aberto.

Modos

Modo	Comportamento	Uso ideal
Single expand	Apenas uma seção aberta por vez.	FAQ (R2), navegação contextual.
Multi expand	Várias seções abertas simultaneamente.	Configurações, filtros densos.

Estrutura

<div class="accordion">
  <button class="accordion-trigger"
    aria-expanded="false" aria-controls="a1">
    Como entrar na comunidade?
    <svg class="chevron" aria-hidden="true" ... />
  </button>
  <div id="a1" class="accordion-panel" hidden>
    Cadastro gratuito em comunidadeia.com/entrar.
  </div>
</div>

Faça e não faça

Faça

Use hidden nos painéis colapsados para que leitores ignorem.
Anime apenas chevron + altura — sem fade decorativo.
Em FAQ, primeira pergunta pode vir aberta para indicar o padrão.

Não faça

Não use accordion para conteúdo crítico de leitura linear.
Não aninhe accordion dentro de accordion.
Não combine com tabs no mesmo bloco.

Acessibilidade

aria-expanded alterna true/false ao clicar.
Painel colapsado deve ser inacessível a leitores (hidden ou display:none).
Use primitiva acessível (Radix Accordion, React Aria) sempre que possível.
Setas ↑/↓ opcionais para navegar triggers.