Elementos Interativos

6.1 Tag <details>

O HTML5 adicionou os elementos <details> e <summary>, que são destinados a criar blocos expansíveis interativos. Esses elementos permitem que os usuários expandam e recolham o conteúdo, melhorando a interação com o usuário e economizando espaço na página da web.

O elemento <details> é usado para criar um bloco que pode ser expandido ou recolhido. Você pode colocar qualquer conteúdo HTML dentro dele. Quando expandido, o <details> mostra o conteúdo aninhado e quando recolhido, ele se esconde.

Sintaxe:

    
      <details>
        <summary>Título</summary>
        <!-- Conteúdo oculto -->
      </details>
    
  

Atributo open:

Se o atributo estiver presente, o bloco <details> será expandido por padrão.

Exemplo de uso do <details>

    
      <details open>
        <summary>Informações Principais</summary>
        <p>Esta informação é visível por padrão, pois o atributo open está definido.</p>
      </details>
    
  

Explicação

• <details>: cria um contêiner para conteúdo oculto.
• <summary>: define o título que está sempre visível e pode ser clicado para expandir ou recolher o conteúdo.

6.2 Tag <summary>

O elemento <summary> é usado dentro de <details> para criar um título. Esse título está sempre visível e serve como elemento de controle para expandir ou recolher o conteúdo do bloco <details>.

Sintaxe:

    
      <details>
        <summary>Título</summary>
        <!-- Conteúdo oculto -->
      </details>
    
  

Exemplo de uso:

    
      <details>
        <summary>Mais Detalhes</summary>
        <p>Este é o conteúdo oculto que se torna visível quando o bloco é expandido.</p>
      </details>
    
  

Vantagens de usar <details> e <summary>

1. Melhoria na experiência do usuário: os usuários podem controlar por conta própria qual conteúdo eles querem ver.
2. Economia de espaço: ocultar uma grande quantidade de informações atrás de títulos interativos.
3. Marcação semântica: melhora a estrutura do documento HTML e aumenta sua acessibilidade para usuários e mecanismos de busca.

6.3 Interação com JavaScript

Os elementos <details> e <summary> podem ser facilmente controlados com JavaScript para criar páginas web mais interativas.

Exemplo de uso com JavaScript:

    
      <details>
        <summary>Mais Detalhes</summary>
        <p>Este é o conteúdo oculto que se torna visível quando o bloco é expandido.</p>
      </details>
      <details open>
        <summary>Informações Principais</summary>
        <p>Esta informação é visível por padrão, pois o atributo open está definido.</p>
      </details>
      <button id="toggleDetails">Recolher/Expandir</button>
    
  

    
      // Encontrar o botão com id 'toggleDetails' e adicionar um event listener para 'click'
      document.getElementById('toggleDetails').addEventListener('click', () => {
        // Procurar todos os elementos 'details' na página
        document.querySelectorAll('details').forEach(detail => {
          // Inverter o valor da propriedade 'open' de cada elemento 'details'
          detail.open = !detail.open; 
        });
      });
    
  

Explicação:

• Botão "Recolher/Expandir": controla o estado de todos os elementos <details> na página
• Evento click: alterna o atributo open para todos os elementos <details>