Éléments interactifs

6.1 Balise <details>

HTML5 a ajouté les éléments <details> et <summary>, qui sont conçus pour créer des blocs déroulants interactifs. Ces éléments permettent aux utilisateurs d'afficher ou de masquer du contenu, améliorant ainsi l'interaction utilisateur et économisant de l'espace sur la page web.

L'élément <details> est utilisé pour créer un bloc qui peut être étendu ou réduit. À l'intérieur, tu peux mettre n'importe quel contenu HTML. Lorsqu'il est étendu, le contenu imbriqué de <details> est affiché, sinon il est masqué.

Syntaxe :

    
      <details>
        <summary>Titre</summary>
        <!-- Contenu caché -->
      </details>
    
  

Attribut open :

Si l'attribut est présent, le bloc <details> sera ouvert par défaut.

Exemple d'utilisation de <details>

    
      <details open>
        <summary>Informations principales</summary>
        <p>Cette information est visible par défaut car l'attribut open est défini.</p>
      </details>
    
  

Explications

• <details> : crée un conteneur pour le contenu caché.
• <summary> : définit le titre qui est toujours visible et sur lequel on peut cliquer pour afficher ou masquer le contenu.

6.2 Balise <summary>

L'élément <summary> est utilisé à l'intérieur de <details> pour créer un titre. Ce titre est toujours visible et sert comme élément de contrôle pour afficher ou masquer le contenu du bloc <details>.

Syntaxe :

    
      <details>
        <summary>Titre</summary>
        <!-- Contenu caché -->
      </details>
    
  

Exemple d'utilisation :

    
      <details>
        <summary>En savoir plus</summary>
        <p>Ceci est un contenu caché qui devient visible lors de l'extension du bloc.</p>
      </details>
    
  

Avantages de l'utilisation de <details> et <summary>

1. Amélioration de l'expérience utilisateur : les utilisateurs peuvent contrôler eux-mêmes le contenu qu'ils souhaitent voir.
2. Économie d'espace : masquage d'une grande quantité d'informations derrière des titres interactifs.
3. Balise sémantique : amélioration de la structure du document HTML et de son accessibilité pour les utilisateurs et les moteurs de recherche.

6.3 Interaction avec JavaScript

Les éléments <details> et <summary> peuvent être facilement contrôlés avec JavaScript pour créer des pages web plus interactives.

Exemple d'utilisation de JavaScript :

    
      <details>
        <summary>En savoir plus</summary>
        <p>Ceci est un contenu caché qui devient visible lors de l'extension du bloc.</p>
      </details>
      <details open>
        <summary>Informations principales</summary>
        <p>Cette information est visible par défaut car l'attribut open est défini.</p>
      </details>
      <button id="toggleDetails">Réduire/étendre</button>
    
  

    
      // Trouve le bouton avec l'id 'toggleDetails' et ajoute un gestionnaire d'événement 'click'
      document.getElementById('toggleDetails').addEventListener('click', () => {
        // Trouve tous les éléments 'details' sur la page
        document.querySelectorAll('details').forEach(detail => {
          // Inverse la valeur de la propriété 'open' de chaque élément 'details'
          detail.open = !detail.open; 
        });
      });
    
  

Explications :

• Bouton "Réduire/étendre" : contrôle l'état de tous les éléments <details> sur la page
• Événement click : bascule l'attribut open pour tous les éléments <details>