HTMLDetailsElement.open — Eigenschaft · JavaScript-Referenz

Signatur

HTMLDetailsElement.open

Beschreibung

Die Eigenschaft open des Interfaces HTMLDetailsElement ist ein boolescher Wert. Sie spiegelt das HTML-Attribut open des Elements <details> wider. Ist sie true, sieht der Benutzer den Inhalt des Elements, also alles außer dem <summary>. Bei false ist nur die Zusammenfassung zu sehen.

Die Eigenschaft lässt sich lesen und schreiben. Wer details.open = true setzt, fügt das Attribut open hinzu. Bei false wird es entfernt. Umgekehrt ändert sich open auch dann, wenn der Benutzer auf das <summary> klickt. Jede Änderung, ob per Skript oder durch den Benutzer, löst das Ereignis toggle aus.

Typische Anwendungen sind „Alle aufklappen/zuklappen“-Schaltflächen in FAQ-Listen, das Speichern des Zustands (z. B. in localStorage) und das automatische Öffnen eines Abschnitts, wenn der Anker in der URL auf ihn zeigt.

Parameter

Name	Typ	Default	Beschreibung
$value	boolean	false	Beim Setzen: `true` öffnet das Element, `false` schließt es. Andere Werte werden in einen booleschen Wert umgewandelt (truthy/falsy).

Beispiele

Zustand lesen und umschalten

// <details id="info"><summary>Mehr</summary><p>Details…</p></details>
const details = document.querySelector('#info');

console.log(details.open); // false
details.open = !details.open;
console.log(details.open, details.hasAttribute('open'));

false true true

FAQ: Alle auf- bzw. zuklappen

const toggleAll = (open) => {
  document.querySelectorAll('.faq details').forEach((d) => {
    d.open = open;
  });
};

document.querySelector('#expand').addEventListener('click', () => toggleAll(true));
document.querySelector('#collapse').addEventListener('click', () => toggleAll(false));

Zustand in localStorage speichern

const details = document.querySelector('#settings');
const key = 'settings-open';

// Gespeicherten Zustand wiederherstellen
details.open = localStorage.getItem(key) === 'true';

// Änderungen (Klick oder Skript) speichern
details.addEventListener('toggle', () => {
  localStorage.setItem(key, String(details.open));
  console.log(`Abschnitt ist jetzt ${details.open ? 'offen' : 'geschlossen'}`);
});

Abschnitt ist jetzt offen

Abschnitt per URL-Anker öffnen

const openFromHash = () => {
  const target = location.hash && document.querySelector(location.hash);
  const details = target?.closest('details');
  if (details) {
    details.open = true;
    target.scrollIntoView({ behavior: 'smooth' });
  }
};

window.addEventListener('hashchange', openFromHash);
openFromHash();

// Wichtig · Fallstricke

Attribut vs. Eigenschaft: Das HTML-Attribut open ist ein boolesches Attribut. Schon open="false" öffnet das Element, denn es zählt nur, ob das Attribut vorhanden ist. Im Skript sollte man deshalb details.open = false oder removeAttribute('open') verwenden, nicht setAttribute('open', 'false').
toggle ist asynchron: Das Ereignis wird nachträglich ausgelöst und hat keine cancelable-Eigenschaft. Mehrere schnelle Änderungen hintereinander können zu einem einzigen Ereignis zusammengefasst werden. Um das Öffnen zu verhindern, muss man preventDefault() im click-Handler des <summary> aufrufen.
Exklusive Akkordeons: Haben mehrere <details> dasselbe name-Attribut, kann immer nur eines offen sein. Wird ein weiteres per open = true geöffnet, schließen sich die anderen automatisch. Das wird in neueren Browsern unterstützt (Chrome 120+, Safari 17.2+, Firefox 130+).
Browser-Kompatibilität: <details> und open funktionieren in allen modernen Browsern. Nur der Internet Explorer und der alte Edge (EdgeHTML) unterstützen sie nicht.
Suche im Browser: In Chromium-Browsern öffnet die Seitensuche (Strg+F) geschlossene <details>-Elemente automatisch, wenn sie einen Treffer enthalten. Dabei ändert sich auch open.

Siehe auch

HTMLDataListElement.options HTMLDetailsElement.name HTMLDialogElement.open HTMLMetaElement.content HTMLMetaElement.name