HTML-Befehle <details> und <summary>

Ausklappbare Bereiche ähnlich wie die Ziehharmonika-Effekte mit jQuery sind nun mit den HTML5-Befehlen <details> und <summary> in den Befehlen von HTML enthalten. Es gibt einen Unterschied (meiner Meinung nach ein Vorteil) zum Harmonika-Effekt: es können mehrere Bereiche geöffnet sein.

Aber der Reihe nach. Schauen wir uns den Einsatz in HTML an. Es werden beide Befehle benötigt und die Anweisung <details> umschließt den kompletten Bereich. In diesem Bereich kommt als erstes die Anweisung <summary> - dieser ist immer sichtbar und wird automatisch mit einem Pfeil davor versehen.

Jeder weitere Text und HTML-Code wird erst sichtbar, wenn man auf den Text von <summary> klickt.

<details>
  <summary>Zusammenfassung Punkt 1</summary>
  <p>Hier kommt der ausführliche Inhalt zum Punkt 1</p>
</details>
Zusammenfassung Punkt 1

Hier kommt der ausführliche Inhalt zum Punkt 1

Es kann nach dem Endtag </summary> und vor dem Endtag von </details> beliebiger HTML-Code und Inhalt kommen, der erst nach aufklappen sichtbar wird:

<details>
  <summary>mehr Informationen zu Punkt 2</summary>
  <ul>
    <li>Listen sind möglich</li>
    <li>mit dem üblichen Aufbau</li>
  </ul>
  <p>wie auch jeder andere HTML-Code wie z.B. Bilder</p>
  <img src="bilder/html-seminar.jpg">
</details>
mehr Informationen zu Punkt 2
  • Listen sind möglich
  • mit dem üblichen Aufbau

wie auch jeder andere HTML-Code wie z.B. Bilder

HTML-Seminar Logo

Und wir können auch weitere Aufklappbereiche innerhalb eines Aufklappbereiches integrieren.

<details>
  <summary>Aufklappbereiche innerhalb von Aufklappbereichen</summary>
  <p>Es können auch weitere Aufklappbereiche innerhalb folgen</p>
  <details>
    <summary>Aufklappbereiche innerhalb</summary>
    <p>Inhalt des zweiten Aufklappbereichs</p>
  </details>
</details>
Aufklappbereiche innerhalb von Aufklappbereichen

Es können auch weitere Aufklappbereiche innerhalb folgen

Aufklappbereiche innerhalb

Inhalt des zweiten Aufklappbereichs

Das entsprechende Design muss über CSS gesetzt werden, ansonsten ist der Aufklappbereich innerhalb visuell nach dem Aufklappen gleich wie die erste Stufe.

<style>
details {
	background-color: yellow;
}
details details {
	background-color: limegreen;
	margin-left: 1em;
}
</style>
Aufklappbereiche innerhalb von Aufklappbereichen

Es können auch weitere Aufklappbereiche innerhalb folgen

Aufklappbereiche innerhalb

Inhalt des zweiten Aufklappbereichs

Möchte man einen Bereich bereits beim ersten Aufruf aufgeklappt dem Besucher zeigen, wird der HTML-Befehl <details> mit dem Attribut open ergänzt:

<details open>
  <summary>Zusammenfassung Punkt 1</summary>
  <p>Hier kommt der ausführliche Inhalt zum Punkt 1</p>
</details>
Zusammenfassung Punkt 1

Hier kommt der ausführliche Inhalt zum Punkt 1

Wer sich die HTML Befehle <summary> in Chrome anschaut, wundert sich vielleicht über den Rahmen, der erscheint, nachdem man einen Punkt angeklickt hat. In Chrome gibt es diesen Rahmen, um anzuzeigen, welches Element den Focus gerade hat. Dadurch können wir mit der TAB-Taste zum nächsten Element wechseln (und sehen auch durch den Rahmen, wo wir uns gerade befinden) und durch die Leertaste diesen Bereich aufklappen bzw. wieder zuklappen.

Wollen wir diesen aus Designgründen diesen Rahmen wegbekommen, funktioniert das über CSS:

summary:focus {
	outline: none;
}

Hier könnten wir nun auch anderes Design mitgeben für den Punkt, der gerade den Focus hat, z.B. eine andere Farbe.

Anklickbare Elemente unterstreichen

Wenn wir für den Besucher ein Feedback wollen, dass er auf diesen Text klicken kann und dann etwas passiert, geben wir dem Text eine Unterstreichung bei Mausberührung über CSS mit:

summary:hover {
	text-decoration: underline;
}

Nutzbarkeit bei Browser – leider nicht bei IE

Wie so oft funktionieren geniale neue HTML5-Befehle nicht im Microsoft Internet Explorer. Eine Liste, in welchen Browsern ab welcher Version diese HTML-Befehle funktionieren bekommt man unter:
https://caniuse.com/#feat=details

Ein Argument diese Befehle trotzdem zu nutzen ist, dass im IE dann von vorneherein die Bereiche aufgeklappt sind. Es werden also keine Informationen unterschlagen. Ob man eine Steuerung wie die Folgenden umsetzt, muss jeder für sich entscheiden. Aber einfach mal zu zeigen, was so geht ohne JavaScript. Und wer im IE unbedingt auch diese Funktionen benötigt, findet JavaScript-Lösungen in Zusammenarbeit mit <details> und <summary>.

Steuerung für die Website mit Aufklappbereich nur aus HTML und CSS erstellen

Jetzt könnten wir auf die Idee kommen, eine typische klassische Navigation über diese Elemente zu erstellen. Eine typische Steuerung besteht aus dem HTML5-Element <nav> und den typischen Listenelementen (<ul> und <li>). Im Folgenden der entsprechende Quellcode, damit wir einen Vergleich zum erweiterten haben:

<nav>
<ul>
  <li><a href="#">Startseite</a></li>
  <li>Unsere Produkte
    <ul>
      <li>Produktkategorie A
      <ul>
        <li><a href="#">Produkt A1</a></li>
        <li><a href="#">Produkt A2</a></li>
      </ul>
      </li>
      <li>Produktkategorie B
        <ul>
          <li><a href="#">Produkt B1</a></li>
          <li><a href="#">Produkt B2</a></li>
          <li><a href="#">Produkt B3</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Unsere Leistungen
    <ul>
      <li><a href="#">Leistung 1</a></li>
      <li><a href="#">Leistung 2</a></li>
    </ul>
  </li>
  <li><a href="#">Kontakt</a></li>
</ul>
</nav>

Aber wie sieht das mit den neuen Aufklapp-Elementen aus? Wir wollen natürlich weiter das logische Element der Listen verwenden. Ein Vorschlag wäre folgender, der vom Validator (https://validator.w3.org/) auch als korrekt ausgeworfen wird.

<nav id="steuerungmitdetails">
<ul>
  <li><a href="#">Startseite</a></li>
  <li>
    <details>
      <summary>Unsere Produkte</summary>
        <details>
          <summary>Produktkategorie A</summary>
          <ul>
            <li><a href="#">Produkt A1</a></li>
            <li><a href="#">Produkt A2</a></li>
          </ul>
        </details>
        <details>
          <summary>Produktkategorie B</summary>
          <ul>
            <li><a href="#">Produkt B1</a></li>
            <li><a href="#">Produkt B2</a></li>
            <li><a href="#">Produkt B3</a></li>
          </ul>
        </details>
    </details>
  </li>
  <li>
    <details>
      <summary>Unsere Leistungen</summary>
      <ul>
        <li><a href="#">Leistung 1</a></li>
        <li><a href="#">Leistung 2</a></li>
      </ul>
    </details>
  </li>
  <li><a href="#">Kontakt</a></li>
</ul>
</nav>

Damit das ganze einigermaßen Übersichtlich wird, gibt es für den Bereich gleich ein bisschen CSS:

#steuerungmitdetails {
	border: 1px solid orange;
}
#steuerungmitdetails ul {
	margin-left: 1em;
	padding-left: 0;
}
#steuerungmitdetails ul ul {
	margin-left: 1em;
	padding-left: 1em;
}
#steuerungmitdetails ul li {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
#steuerungmitdetails ul li li {
	list-style-type: square;
}

#steuerungmitdetails details details {
	background-color: #eee;
	margin-left: 1em;
}

Dieses Navigation mit details/summary-Beispiel kann auch direkt getestet werden unter der URL https://www.html-seminar.de/beispielcode/html-befehle-details-summary-bsp.htm.