Startseite > Akkordeon
Akkordeon: auf- und zuklappbare Bereiche
Groß in Mode gekommen sind auf- und zuklappbare Bereiche, auch Akkordeon
genannt. Vorteil: lange Webseiten mit viel Inhalt sind auf den ersten Blick kürzer und übersichtlicher. Nachteil: Suchmaschinen nehmen den in Akkordeons
enthaltenen Text nicht gar so wichtig.
HTML 5 mit neuen Elementen und CSS 3 mit neuen Eigenschaften bieten Webmastern und Webdesignern mehr Möglichkeiten, als sie früher hatten. Zur Darstellung von auf- und zuklappbaren Bereichen gibt es die neuen HTML-Elemente details und summary (hier verwendet). Über CSS-Regeln können sie gezielt gestylt
werden, zB mit den Selektoren details[open] summary {...} oder details:not([open]) {...} summary {...}. Vorteil dieser Lösung: zur gleichen Zeit können mehrere Bereiche aufgeklappt werden. Für dieses Akkordeon
verwende ich einen div-Behälter mit der CSS-Klasse akkord.
für mobile Endgeräte geeignet
Das Akkordeon
ist responsiv und mobilgeräte-tauglich: CSS-Regeln für schmalere Endgeräte habe ich ergänzt.
Tastaturbedienung ist gewährleistet
In den aktuellen Browsern können die Überschriften (also die summary-Elemente) mit der TAB-Taste angesprungen werden. Mit der Eingabe-Taste oder der Leertaste wird dann der entsprechende Bereich auf- oder zugeklappt. Damit ist diese Akkordeon
-Lösung zugänglich.
unterschiedliche Höhe der Aufklapp-Bereiche
Um die unterschiedliche Höhe der aufgeklappten Bereiche muß man sich nicht kümmern, denn die Höhe wird von den Browsern automatisch festgelegt: bei Bereichen mit wenig Inhalt weniger hoch, bei Bereichen mit viel Inhalt höher (so, daß alles reinpaßt).
aufgeklappte(n) Bereich(e) vorab festlegen
Sie als Webmaster können im HTML-Quelltext vorab festlegen, welcher Bereich oder welche Bereiche sofort aufgeklappt dargestellt werden. Das kann einer oder keiner sein, oder es können mehrere oder alle sein. Zum sofortigen Aufklappen wird im details-Element das Attribut open vermerkt: <details open>.
eine reine HTML-/CSS-Lösung :-)
Das Akkordeon
verwendet kein Javascript und kein jQuery, sondern nur HTML und CSS.
für alle HTML-fähigen Inhalte nutzbar
Das Akkordeon
ist für alle HTML-fähigen Inhalte wie zB Bilder nutzbar. (Beispieltext und -bild:)
Rhodos liegt am südöstlichen Rand des Ägäischen Meeres und gehört geografisch zur Inselgruppe der Südlichen Sporaden. Mit 1400 km² Fläche ist Rhodos nach Kreta, Euböa und Lesbos die viertgrößte griechische Insel (zum Vergleich: Rügen, Deutschlands größte Insel, ist 926 km² groß). Die Küstenlinie mißt 222 km Länge. Rhodos ist 77 km lang und 35 km breit und hat die Form eines Delfins, der nach Nordosten in Richtung türkische Küste schwimmt. Die geringste Entfernung von Rhodos zur türkischen Küste beträgt knapp 10 Seemeilen: vom Flughafen Diagoras westlich der Stadt Rhodos bis zur Halbinsel Loryma (türkisch: Bozburun) östlich der Insel Symi.
Akkordeon: Fließtext im Spaltensatz
Sie können im Akkordeon
Fließtext auch im Spaltensatz anordnen. Es sieht besser aus, wenn Sie dann die Klasse spalten direkt dem betreffenden Absatz zuordnen:<p class="spalten">...</p>.
HTML-Quelltext:
<div class="akkord">
<details open>
<summary>für mobile Endgeräte geeignet</summary>
<p>Das Akkordeon ist responsiv und mobilgeräte-tauglich ...</p>
</details>
<details>
<summary>Tastaturbedienung ist gewährleistet</summary>
<p>In den aktuellen Browsern können die Überschriften ...</p>
</details>
... usw. ...
</div>
Kleiner Tipp: Das Akkordeon
sollte nicht ganz unten auf einer Seite platziert werden. Am Besten fügt man unterhalb noch einen Absatz mit Text oder anderen Inhalten ein. Ohne diese Maßnahme würde, zumindest in älteren Firefox-Versionen, der unterste Bereich (also das letzte detail-Element) nach dem Aufklappen ohne Scrollen nur unvollständig angezeigt. Das wäre für Besucher lästig.