Carregando
O elemento <details> cria accordions e seções expansíveis sem necessidade de JavaScript.
openAtributo booleano que define se o conteúdo está visível. Pode ser controlado via JavaScript
nameAgrupa múltiplos details para comportamento de accordion (apenas um aberto por vez)
O elemento <details> é um container que pode ser expandido ou recolhido. Ele deve conter um elemento <summary> que serve como título clicável.
<summary>Define o título visível do accordion. É o elemento clicável que expande/recolhe o conteúdo. Sempre deve ser o primeiro filho de details.
Atributo nameQuando múltiplos details possuem o mesmo valor no atributo name, eles funcionam como um accordion exclusivo: abrir um fecha os outros automaticamente.
export default function AccordionExample() {
return (
<div>
<details>
<summary>Pergunta 1: O que é Frontend Lab?</summary>
<p>É uma plataforma de estudos sobre recursos nativos do navegador.</p>
</details>
<details>
<summary>Pergunta 2: Preciso de JavaScript?</summary>
<p>Não! O details funciona 100% com HTML puro.</p>
</details>
{/* Accordion com name - apenas um aberto por vez */}
<details name="faq">
<summary>Grupo 1</summary>
<p>Conteúdo do grupo 1</p>
</details>
<details name="faq">
<summary>Grupo 2</summary>
<p>Conteúdo do grupo 2</p>
</details>
</div>
);
}Clique nos itens abaixo para expandir/recolher. Note que os dois últimos usam o atributo name para funcionar como accordion (apenas um aberto por vez).
É uma plataforma de estudos práticos focada em recursos nativos do navegador que muitos desenvolvedores desconhecem.
Não! O elemento details funciona 100% com HTML puro. JavaScript é opcional para casos avançados.
Accordion com atributo name:
Ao abrir esta seção, a outra do mesmo grupo fecha automaticamente.
Este comportamento é nativo do HTML usando o atributo name.