Exemplo
Usando o <details> elemento:
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
Tente você mesmo " Definição e Uso
Os <details> tag especifica detalhes adicionais que o usuário pode exibir ou ocultar sob demanda.
Os <details> tag pode ser usado para criar um widget interativo que o usuário pode abrir e fechar. Qualquer tipo de conteúdo pode ser colocado no interior do <details> tag.
O conteúdo de um <details> elemento não deve ser visível a menos que o open atributo é definido.
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente o elemento.
Elemento | |||||
---|---|---|---|---|---|
<details> | 12.0 | Não suportado | 48,0 | 6 | 15,0 |
Diferenças entre HTML 4.01 e HTML5
O <details> tag é novo em HTML5.
Dicas e Notas
Dica: O <summary> tag é usada para especificar um título visível para os detalhes.O título pode ser clicado para exibir / ocultar os detalhes.
Atributos
= Novo em HTML5.
Atributo | Valor | Descrição |
---|---|---|
open | open | Especifica que os detalhes devem ser visíveis (aberto) para o usuário |
Atributos globais
O <details> tag também suporta o Global de Atributos em HTML .
Atributos de eventos
O <details> tag também suporta o evento Atributos em HTML .
Páginas relacionadas
Referência DOM HTML: Details Objeto
Configurações CSS padrão
A maioria dos navegadores irá exibir os <details> elemento com os seguintes valores padrão:
details {
display: block;
}