O elemento representa um “widget de divulgação” a partir do qual o usuário pode obter informações ou controles adicionais. Ele permite que você crie seções recolhíveis de conteúdo em uma página da web, fornecendo uma maneira interativa de ocultar ou revelar conteúdo conforme necessário.
Sintaxe
A sintaxe básica para o
1 |
|
2 |
|
3 |
|
4 |
|
O
elemento como seu primeiro filho. O conteúdo a ser revelado ou ocultado é colocado após o
elemento e pode ser marcado como a maioria dos conteúdos normais; a
a
um ![]()
Exemplo
Aqui está um exemplo simples com quase nenhum estilo. Mostra como o
elemento pode ser usado, com dois
elementos, cada um revelando um
quando clicado:
Aqui está um segundo exemplo, com um pouco mais de marcação HTML, para tornar o estilo com CSS um pouco mais fácil. Esta demonstração foi retirada do tutorial de Jemima Abu, Como construir um acordeão HTML (sem CSS ou JavaScript!)
Atributos
O
elemento suporta os seguintes atributos:
-
open: especifica que os detalhes devem estar visíveis quando a página for carregada. Este atributo não requer um valor e pode ser incluído da seguinte forma:
Contente
O
O elemento pode conter conteúdo HTML como texto, imagens, listas, tabelas e muito mais. Você pode incluir elementos HTML válidos no
elemento para fornecer o conteúdo desejado que será revelado ou ocultado.
Você sabia?
- O
- Ao usar o
- Você pode estilizar a aparência do widget de divulgação usando CSS para personalizar sua apresentação visual.
Estilo
Por padrão, o
elemento usa o text cursor. Considere mudar isso para um pointer cursor para mostrar ao usuário que este é um elemento interativo.
Você também pode descobrir que tornar o texto do resumo não selecionável melhora a experiência do usuário. Observe nos exemplos acima como clicar no resumo geralmente resulta no destaque de parte do texto?
Considere se o resumo deve ser selecionável pelo usuário antes de fazer isso.
1
details summary {
2
cursor: pointer;
3
user-select: none;
4
}
Pseudoelementos resumidos
Existem alguns grandes pseudo-elementos associados ao details e summary elementos (como ::marker) que pode ajudá-lo a estilizar ainda mais as coisas. Confira esta linda ideia de caixa de correio usando o open atributo, por Kilian Valkhof.
Saber mais
