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