details
O que é <details>?
A tag <details> é um elemento interativo do HTML5 que permite criar seções expansíveis e recolhíveis — tipo um “acordeão” simples, sem precisar de JavaScript.
Estrutura básica
html
<details>
<summary>Título visível</summary>
<p>Este conteúdo aparece quando o usuário clica no título.</p>
</details>
Como funciona:
- A tag <summary> define o título clicável .
- O conteúdo dentro de <details> mas fora de <summary> fica escondido por padrão.
- Ao clicar no <summary>, o conteúdo abaixo aparece ou desaparece.
Características
Comportamento =Descrição
Interativo = O usuário pode expandir/recolher sem precisar de JavaScript.
Acessível = Compatível com teclados e leitores de tela.
Simples de usar = Ideal para FAQs, descrições ocultas, e seções que não devem estar sempre visíveis.
Exemplo com vários elementos
html
<details>
<summary>O que é HTML?</summary>
<p>HTML é a linguagem de marcação para criar páginas web.</p>
</details>
<details>
<summary>O que é CSS?</summary>
<p>CSS define o estilo visual do HTML, como cores e layout.</p>
</details>
Personalizações úteis
Estilizando com CSS:
Você pode estilizar com CSS normalmente:
css
details {
margin: 10px 0;
}
summary {
cursor: pointer;
font-weight: bold;
}
Evento: abrir/fechar
Se quiser detectar quando o usuário expande ou recolhe, pode usar JavaScript:
html
<details id="info">
<summary>Mais informações</summary>
<p>Detalhes importantes aqui.</p>
</details>
<script>
document.getElementById('info').addEventListener('toggle', function () {
console.log(this.open ? 'Aberto' : 'Fechado');
});
</script>