Etiqueta HTML <details>

Definição e Uso

<details> etiqueta define outros detalhes que o usuário pode abrir e fechar conforme necessário.

<details> etiqueta geralmente é usada para criar widgets interativos que o usuário pode abrir e fechar. Pelo padrão, o widget está fechado. Ao abrir, ele se expande e mostra seu conteúdo.

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

Dica:<summary> etiqueta com <details> Ao combinar, você pode definir um título visível para os detalhes. Quando o usuário clicar no título, ele <details> Define o conteúdo.

Veja também:

Manual de Referência do DOM HTML:Objeto Details

Exemplo

Exemplo 1

Defina detalhes que o usuário pode abrir e fechar conforme necessário:

<details>
  <summary>Centro do Mundo Futuro (Epcot Center)</summary>
  <p>Epcot é um parque temático do Walt Disney World Resort, com atrações emocionantes, exposições internacionais, fogueiras de fogos de artifício premiadas e eventos sazonais.</p>
</details>

Experimente você mesmo

Exemplo 2

Defina o estilo de <details> e <summary> usando CSS:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>Centro do Mundo Futuro (Epcot Center)</summary>
  <p>Epcot é um parque temático do Walt Disney World Resort, com atrações emocionantes, exposições internacionais, fogueiras de fogos de artifício premiadas e eventos sazonais.</p>
</details>
</body>
</html>

Experimente você mesmo

Atributo

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

Propriedades globais

<details> A etiqueta também suporta Propriedades globais no HTML.

Propriedades de evento

<details> A etiqueta também suporta Propriedades de evento no HTML.

Configurações CSS padrão

A maioria dos navegadores usará os seguintes valores padrão para exibir <details> Elemento:

details {
  display: block;
}

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou o elemento pela primeira vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0