Tag <details>

Definições e uso

A tag <details> especifica detalhes adicionais que o usuário pode abrir e fechar de acordo com sua demanda

A tag <details> é normalmente usada para criar um widget que o usuário possa abrir e fechar. Por padrão, o widget é mantido fechado. Quando aberto, ele se expande, e revela o conteúdo mantido dentro.

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

Dica: A tag <summary> é usada em conjunção com a tag <details> a fim de especificar um cabeçalho visível para os detalhes

Exemplos


<details>
  <summary>Epcot Center</summary>
  <p>
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
  </p>
</details>


<!DOCTYPE html>
<html>
<body>

<h1>Tag details</h1>

<details>
  <summary>Epcot Center</summary>
  <p>
Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.
  </p>
</details>

</body>
</html>

Resultado

Atributos

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

Esta tag também suporta Atributos Globais.