Como definir um título visível para o elemento de detalhes em HTML5?
Neste artigo, aprenderemos como definir um título visível para o elemento <details> . Este elemento é usado para criar um widget que revela informações quando está no estado “ aberto ”. O estado pode ser alternado clicando no elemento. O conteúdo que deve ser revelado é colocado dentro da tag <details> .
Abordagem: O <summary> tag é usada para definir o título que seria visível independentemente do estado do widget. Quando o primeiro filho do elemento <details> é o elemento <summary> , o conteúdo desta tag é usado para exibir o rótulo do widget.
Sintaxe:
<details> <!-- Define the heading to be displayed --> <summary>Heading Summary One</summary> This is the content for heading one. </details>
Exemplo: Os exemplos abaixo ilustram a tag <summary> para definir o título do elemento <details> .
<html>
<head>
<style>
details {
padding: 10px;
border: 2px solid;
}
summary {
cursor: pointer;
outline: 0;
padding-bottom: 10px;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
How to define a visible heading for
a <details> element in HTML5?
</h3>
<!-- Define the <details> element -->
<details open>
<!-- Define the heading to be displayed -->
<summary>Heading Summary One</summary>
This is the content for heading one. The
content outside the <summary> tag
is displayed here.
</details>
<!-- Define the <details> element -->
<details>
<!-- Define the heading to be displayed -->
<summary>Heading Summary Two</summary>
This is the content for heading two. The
content outside the <summary> tag
is displayed here.
</details>
<!-- Define the <details> element -->
<details>
<!-- Define the heading to be displayed -->
<summary>Heading Summary Three</summary>
This is the content for heading three. The
content outside the <summary> tag
is displayed here.
</details>
</body>
</html>
Saída:
título visível
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva