Acordeão (accordion)

Componente que mostra e esconde blocos de conteúdo em painéis que abrem e fecham.

Hard

O que é

Acordeão é o componente que agrupa conteúdo em painéis que dá pra recolher. A pessoa abre uma seção pra ver o detalhe e mantém o resto fechado, e é justamente isso que permite organizar muita informação ocupando pouco espaço.

Na estrutura, cada painel tem um cabeçalho, que funciona como gatilho, e uma área de conteúdo logo abaixo. Clicar no cabeçalho abre ou fecha aquele trecho. Dependendo do caso, ele pode abrir um painel por vez ou vários ao mesmo tempo. Por isso aparece tanto em FAQ, configurações e menus.

Pra ficar bom, o acordeão depende de rótulo claro, de um ícone que indique se está aberto ou fechado e de uma transição suave. Em acessibilidade, ele precisa funcionar por teclado e leitor de tela, com os estados bem marcados. E é especialmente útil no celular, onde o espaço vertical é curto e cada toque conta.

Em uma frase

Esse FAQ no mobile fica melhor como acordeão, cada pergunta abre só a resposta dela.

A pergunta que ele responde

Como eu organizo muito conteúdo numa tela apertada sem deixar tudo à mostra de uma vez?

Quando usar

Faz sentido quando há muito conteúdo e pouco espaço, e a pessoa precisa focar numa seção por vez.

Como não usar

O cuidado é não esconder atrás do acordeão um conteúdo que deveria estar à vista, nem usá-lo num fluxo onde a pessoa precisa comparar seções lado a lado.

Na prática

Pense numa página de dúvidas frequentes no celular. Cada pergunta vira um cabeçalho que a pessoa toca pra abrir só a resposta que interessa, sem precisar rolar por tudo de uma vez.

Não confunda com

Vale separar acordeão de abas, porque o conteúdo se comporta de um jeito diferente em cada um. No acordeão, a seção expande pra baixo na própria coluna, empurrando o resto. Nas abas, você troca o painel inteiro no mesmo lugar, sem empurrar nada. Um cresce na vertical; o outro substitui o que estava à mostra.

D

Em inglês

Accordions

Pronúncia

a-cór-deon

Também chamado de

acordeão, accordion, painel sanfona

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre accordions e seu uso em UI