HTMLDetailsElement

L'interface HTMLDetailsElement fournit des propriétés spécifiques (en plus de celles de l'interface HTMLElement dont elle hérite) pour manipuler les éléments HTML <details>.

Propriétés d'instance

Hérite des propriétés de son parent, HTMLElement.

HTMLDetailsElement.name: Une chaîne de caractères reflétant l'attribut HTML name, qui permet de créer un groupe d'éléments <details> mutuellement exclusifs. Ouvrir l'un des éléments <details> nommés de ce groupe ferme les autres éléments du groupe.
HTMLDetailsElement.open: Un booléen reflétant l'attribut HTML open, indiquant si le contenu de l'élément (hors <summary>) doit être affiché à l'utilisateur·ice.

Méthodes d'instance

Aucune méthode spécifique ; hérite des méthodes de son parent, HTMLElement.

Évènements

Hérite des évènements de son interface parente, HTMLElement.

Exemples

Journaliser l'ouverture et la fermeture de chapitres

Cet exemple utilise l'évènement toggle de HTMLElement pour ajouter et retirer des chapitres d'un journal secondaire à mesure qu'ils sont ouverts et fermés.

HTML

html

<section id="summaries">
  <p>Résumé des chapitres&nbsp;:</p>
  <details id="ch1">
    <summary>Chapitre I</summary>
    La philosophie réprimande Boèce pour la folie de ses plaintes contre la
    Fortune. Sa nature même est le caprice.
  </details>
  <details id="ch2">
    <summary>Chapitre II</summary>
    La philosophie, au nom de la Fortune, répond aux reproches de Boèce et
    prouve que les dons de la Fortune lui appartiennent, à donner comme à
    reprendre.
  </details>
  <details id="ch3">
    <summary>Chapitre III</summary>
    Boèce retombe dans son sentiment de misère actuel. La philosophie lui
    rappelle l'éclat de ses fortunes passées.
  </details>
</section>
<aside id="log">
  <p>Chapitres ouverts&nbsp;:</p>
  <div data-id="ch1" hidden>I</div>
  <div data-id="ch2" hidden>II</div>
  <div data-id="ch3" hidden>III</div>
</aside>

CSS

css

body {
  display: flex;
}

#log {
  flex-shrink: 0;
  padding-left: 3em;
}

#summaries {
  flex-grow: 1;
}

JavaScript

function logItem(e) {
  console.log(e);
  const item = document.querySelector(`[data-id=${e.target.id}]`);
  item.toggleAttribute("hidden");
}

const chapters = document.querySelectorAll("details");
chapters.forEach((chapter) => {
  chapter.addEventListener("toggle", logItem);
});