Tag details

A tag details cria um spoiler em HTML, ou seja, é usada para informações que podem ser ocultadas ou exibidas conforme a vontade do usuário.

Por padrão, o conteúdo da tag está oculto. Para exibi-lo a pedido do usuário, deve-se adicionar a tag summary, que especifica um título para a tag details. Este título está sempre visível na página (mesmo que o conteúdo do details esteja no estado recolhido) e pode-se clicar nele para expandir o texto oculto ou para recolhê-lo.

Também é possível usar o atributo open da tag details para exibir o conteúdo oculto (por exemplo, para mostrar o conteúdo do details usando JavaScript).

Exemplo

Vamos ver como a tag details funciona:

html<details>
  <summary>click me</summary>
  hidden text
</details>

Результат:

Veja também