Accordion · Casa Hacker DS

overview

01

Conteúdo da primeira seção. Pode ter qualquer coisa aqui: texto, listas, outros componentes.

Conteúdo da segunda seção.

Conteúdo da terceira seção.

variantes

02 · single / multi

variante	comportamento
single (default)	abrir um fecha os outros · economia visual
multi	permite múltiplos abertos simultaneamente · permite comparação

multi

Vários itens abertos ao mesmo tempo.

Aberto.

Também aberto.

estados

03

estado	indicação
collapsed	chevron apontando à direita
expanded	chevron rotacionado 90° · body visível
hover	background-hover no header
focus	outline 2px no header

anatomia

04

Header — clicável, mostra label do item
Chevron — indica estado (apontando = colapsado, virado = expandido)
Body — revela ao expandir

comportamentos

05

Click no header alterna expansão
Enter ou Space no header também alterna (focus no header)
No modo single, abrir um fecha os outros
Transição de chevron: 110ms
Estado inicial controlado por classe .open no item

modifiers · api

06

atributo	tipo	default	descrição
data-mode	"single" \| "multi"	"single"	modo de expansão
.open (no item)	class	—	estado inicial expandido
aria-expanded	boolean	"false"	setado automaticamente pelo JS

quando usar

07

use

organizar conteúdo extenso em seções
reduzir scroll em interfaces mobile
FAQ, configurações, especificações técnicas
entre 3 e 7 itens — sweet spot de navegabilidade

não use

conteúdo crítico que precisa ser visto — usa seções abertas
mais de 7 itens — vira lista difícil de navegar
navegação primária — usa tabs ou sidebar
conteúdo que cabe na tela toda sem expansão

acessibilidade

08 · wcag aa

Header é elemento <button>, não div
aria-expanded reflete o estado (true / false)
aria-controls aponta pro ID do body
Foco visível no header
Funciona via teclado (Enter / Space)
Estado expand/collapse é anunciado por leitor de tela

código

09 · html + js

<!-- markup -->
<div class="accordion" data-mode="single">
  <div class="accordion-item open">
    <button class="accordion-header">label<span class="chevron">›</span></button>
    <div class="accordion-body">conteúdo</div>
  </div>
</div>

// JS é auto-inicializado pelo components.js