Acordeão de perguntas frequentes

Lista de perguntas separadas por régua, cada uma abrindo em altura animada. O sinal à direita é um + cuja barra vertical gira 90° e vira −. Um item aberto por vez.

Quando usar

• Antes do rodapé, depois do CTA principal. É onde o visitante que quase converteu vai buscar a objeção que falta.
• 5 a 10 perguntas.
• Quando as perguntas são objeções reais — as que aparecem na primeira reunião comercial.

Quando não usar

• Como central de ajuda. Acima de ~12 itens, o acordeão vira parede e o visitante precisa de busca.
• Para esconder informação que deveria estar na página. FAQ não é depósito do que não coube.
• Quando o SEO depende do conteúdo estar visível: o texto existe no HTML, mas o padrão de leitura muda.

Padrão editorial

Ordem: da objeção mais comum para a mais rara. A primeira pergunta é quase sempre "como funciona" e a última é "como começo".

Nunca responda com "depende". Se depende, diga do quê e dê a faixa.

Como usar

<link rel="stylesheet" href="componentes/listas/acordeao-faq/estilo.css">
<script src="componentes/listas/acordeao-faq/script.js"></script>

Cada resposta precisa de id único, e a pergunta correspondente aponta para ele em aria-controls.

Variações

• Vários abertos ao mesmo tempo — remova o laço que fecha os irmãos no script.
• Primeiro item já aberto — is-open no HTML e uma chamada de abrir() no init. Útil quando a primeira pergunta é a que mais converte.

Gotchas

• A pergunta é <button>, não <div> com clique. Teclado, foco e leitor de tela dependem disso. O aria-expanded é o que anuncia "recolhido/expandido".
• max-height é medido no clique, não no load. Se a fonte ainda não tinha carregado quando a página montou, a altura calculada estaria errada e a resposta sairia cortada.
• Não dá para animar height:auto. E max-height chutado alto (tipo 999px) faz a abertura parecer lenta e o fechamento ter atraso, porque a transição percorre a distância inteira.
• O resize recalcula o item aberto. Mudar a largura da janela muda a altura do texto; sem isso o max-height congelado corta a resposta.
• O sinal gira, não troca. Duas pseudo-barras onde a vertical rotaciona 90°. Trocar um ícone por outro piscaria.
• max-width:840px, não a coluna inteira. Linha de resposta acima de ~75 caracteres cansa, e a pergunta centralizada precisa de bloco mais estreito para não ficar solta.

Histórico

Normalizações aplicadas na extração: .faq-i → .faq-item, .faq-q → .faq-question, .faq-a → .faq-answer, .pm → .faq-sign; .open → .is-open; script passou a partir de [data-faq], suportando vários acordeões na página; adicionados aria-expanded, aria-controls e role="region"; adicionado recálculo de altura no resize; adicionado prefers-reduced-motion.