Tag <details>

Exemplos

Especifique os detalhes que o usuário pode abrir e fechar sob demanda:

<details>
<summary>Epcot Center</summary>
<p>Epcot é um parque temático no Walt Disney World Resort com atrações emocionantes, pavilhões
internacionais, fogos de artifício premiados e eventos especiais sazonais.</p>
</details>

Definição de Uso

A tag <details> especifica detalhes adicionais que o usuário pode abrir e fechar sob demanda.

A tag <details> geralmente é usada para criar um widget interativo que o usuário pode abrir e fechar.

Por padrão, o widget está fechado. Quando aberto, ele se expande e exibe o conteúdo dentro dele.

Qualquer tipo de conteúdo pode ser colocado dentro da tag <details>.

Dica: A tag <summary> é usada em conjunto com <details> para especificar um cabeçalho visível para os detalhes.

Suporte para Navegadores

Os números na tabela especificam a primeira versão do navegador que suporta totalmente o elemento.

Navegadores
Compatibilidade	12.0	6.0	49.0	79.0	15.0

Atributo	Valor	Descrição
open	open	Especifica que os detalhes devem estar visíveis (open) para o usuário

Atributos Globais

A tag <details> também suportam os Atributos Globais em HTML.