Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML-Tipps für Webentwickler: Jede Woche neu

details und summary: Akkordeon mit purem HTML

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
07:29
  Lesezeichen setzen

Transkript

Ausklappende Bereiche sind praktisch, wenn Sie bestimmte Inhalte erst einmal verstecken wollen, die dann bei Bedarf angezeigt werden. Klassischerweise löst man solche Aufgaben mit JavaScript, aber es geht dank Details und "Summary" auch mit HTML pur. Ein Beispiel für ein Akkordeon sehen Siembei "jqueryui" und da kann ich auf die einzelnen Bereiche klicken und die werden dann immer angezeigt. Das ist beispielsweise praktisch, wenn ich eine FRQ-Liste habe, denn Benutzer erhält so den Überblick, was es alles an Fragen gibt und bei der Frage, die ihn interessiert, kann er sich die Antwort anzeigen lassen und das Ganze ist trotzdem sehr platzsparend präsentiert. Sehen wir uns an, wie man das mit HTML pur macht, denn das hier ist natürlich eine JavaScript-Lösung. Dafür benötigen wir das "details"-Element, es auch wieder geschlossen wird und darinnen steht dann "summary". Zum Beispiel "HTML-Kurs" und der Text, der dann wechselnd angezeigt wird, kann beispielsweise in einem Absatz erscheinen: "Informationen zum HTML-Kurs". Und ich erstelle auf diese Art gleich ein zweites Element mit einer anderen Überschrift und einem anderen Inhalt. Sehen wir uns das im Browser an. Und es klappt. Ich habe Elemente, die ich aus- und einklappen kann und das rein mit HTML pur. Es gibt aber einen Unterschied zu dem Akkordeon, wie wir es eben gesehen haben. An dieser Stelle kann ich auch mehrere Elemente gleichzeitig ausgeklappt haben. Beim klassischen Akkordeon ist es hingegen so, wenn ich ein Element ausklappe, sind dadurch die anderen Elemente eingeklappt. Das Element, was geöffnet wird, erhält "open". Sehen wir uns das einmal an in den Entwickler-Tools. Und dann sehen wir bei dem ersten Element erscheint "open". Das kann ich auch beim Zweiten natürlich machen. Und in diesem Fall wird es automatisch vom Browser gesetzt, um diesen Zustand wiederzugeben. Ich kann das aber auch selbst angeben im HTML-Code. Dafür schreibe ich an dieser Stelle "open" und wenn wir das aufrufen, dann sehen wir, das Element ist direkt geöffnet beim ersten Aufruf, aber ich kann das natürlich auch wieder schließen. Sie haben gesehen, dass automatisch so ein kleines Dreieck erscheint. Wie kann man diese Optik ändern? Das ist jetzt unterschiedlich, je nach Browser. Für den "Firefox" können Sie angeben "summary, display: block". Damit entfernen Sie den kleinen Pfeil. Das entsprechende bewirken Sie bei "Chrome", indem Sie "webkit-details-marker-display:none" angeben. Wenn wir uns das jetzt einmal anschauen, dann sehen wir, dass der Pfeil verschwunden ist und in dem Moment, wo der verschwunden ist, kann ich natürlich übererzeugte Inhalte, ein eigenes Symbol nehmen, was angezeigt werden soll. Also übererzeugte Inhalte kann ich selber ein Symbol angeben. Das geht beispielsweise so. Also ich sage "before". Das heißt, vor diesem Element soll ein Inhalt angezeigt werden und ich gebe ein bisschen Abstand an und eine Farbe. Außerdem möchte ich, dass dann ein anderes Symbol angezeigt werden soll, wenn das Element geöffnet ist. Sehen wir uns das einmal an. Und dann sehen wir, da habe ich diesen kleinen Pfeil hier. Und der Pfeil hat unterschiedliche Richtungen, je nachdem, ob es geöffnet oder geschlossen ist. Wenn wir uns das dann einmal anschauen im "Chrome", dann funktioniert das dort natürlich auch. Da sieht man das kleine Symbol. In "Chrome" gibt es noch so einen Rahmen. Diesen kann man auch entfernen. Dafür muss man auf den Fokuszustand zugreifen. Wenn ich angebe "summary: focus" und "outline: [tippen] none", dann erscheint der nicht mehr. Also jetzt ist dieser Rahmen an dieser Stelle nicht mehr zu sehen. Bei neuen Features, stellt sich natürlich immer die bange Frage, wie sieht es mit der Browserunterstützung aus. Die aktuellen Informationen zur Browserunterstützung finden Sie bei "caniuse". Da haben wir einen grünen Bereich. Das heißt, es wird unterstützt. Und auch noch einen roten Bereich. Das heißt, es funktioniert nicht im "Internet Explorer" oder im "Edge". Aber es funktioniert sonst in allen Browsern. Was kann man machen für den "Internet Explorer"? Da finden Sie an dieser Stelle Quellen. Es gibt also "Fallback scripts". Das ist eine Möglichkeit. Also Sie können per "JavaScript" dann in den Browsern, wo es nicht funktioniert, nachbessern. Und da sind mehrere Scripts angegeben. Eine alternative dazu besteht darin, nichts zu tun. Das ist keine Katastrophe. Sehen wir uns das einmal an. So sieht das Beispiel im "Internet Explorer" aus. Das heißt, die Elemente sind default-mäßig ausgeklappt. Und es funktioniert natürlich nicht, das Ein- und Ausklappen. Aber alle Inhalte sind zu sehen. Also könnte man das eventuell auch als Fallback-Lösung lassen. Wir haben uns in diesem Film das neue Details-Element angesehen und Sie haben auch gesehen, wie Sie den Anzeiger vor der Überschrift formatieren können. Das funktioniert so, dass man diesen erst einmal ausblendet und dann kann man mit erzeugten Inhalten ein eigenes Icon einfügen. Für den "Chrome" ist es außerdem eventuell noch sinnvoll den Rahmen zu entfernen. Und damit haben wir wirklich ein schönes Element für eine Interaktion, was früher nurmehr JavaScript möglich ist und heute eben mit HTML alleine auch funktioniert.