Direkt zum Inhalt

HTML-Akkordeon

Dies ist eine Umsetzung des Accordion Design Pattern für dynamisches HTML. Es kann in beliebige HTML-Seiten eingebettet werden.

Wenn im Browser JavaScript deaktiviert ist, funktioniert das Akkordeon nicht, sondern alle Slider sind ausgeklappt.

Beispiel-Akkordeon mit Anleitung und Download

1. Herunterladen und entpacken

Lade das folgende ZIP-Archiv herunter: accordion.zip. Entpacke es und speichere die enthaltenen Dateien in dem Ordner, in dem sich die HTML-Datei befindet, in der du das Akkordeon verwenden möchtest.

2. HTML-Datei vorbereiten

Füge in den <head>-Bereich deiner HTML-Datei folgenden kleinen Codeschnipsel ein: 
<link href="accordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="accordion.js"></script>
Ändere das <body>-Element deiner HTML-Datei ab, indem du das fett Markierte hinzufügst: 
<body onload="accord_loader()">

3. Akkordeon erstellen

Erstelle nun das Akkordeon an einer beliebigen Stelle innerhalb des <body>, indem du nacheinander für jeden Slider folgenden Codeblock hinzufügst: 
<div class="accordionSlider"><div class="accordionSliderHead">
Titel
</div><div class="accordionSliderBody"><div class="accordionSliderInBody">
Inhalt
</div></div></div>

4. Styling

Das Erscheinungsbild des Akkordeons kann mittels CSS beliebig gestaltet werden. Dabei ist ein Slider (inkl. Header) von einem div der Klasse accordionSlider umgeben, deren Stil fast beliebig verändert werden kann (allerdings sollten sowohl position als auch display und float nicht verändert werden, damit das Akkordeon weiterhin funktioniert). Bei den Klassen accordionSliderHead, accordionSliderBody und accordionSliderInBody darf nur Hintergrund- und Textstil verändert werden, nicht jedoch der Rahmen (border, padding und margin müssen unbedingt unangetastet bleiben).
Das Stylesheet, mit dem das Akkordeon auf dieser Seite gestaltet wurde, findet sich hier.

Tipp

Es müssen nicht alle Slider gleich hoch sein, damit das Akkordeon funktioniert, allerdings ist es in diesem Fall besser bedienbar. Verwende zum Beispiel folgende Zeile in deinem Stylesheet, damit alle Slider eine bestimmte Höhe haben und nur im »Notfall« größer werden: 
.accordionSliderInBody { min-height:16em }

Beispiel

Folgendes ZIP-Archiv enthält ein sehr einfaches Akkordeon, inklusive Stylesheet: accordion-sample.zip. Es kann beliebig erweitert werden.
Tipp: Als Besonderheit verwendet dieses Beispiel nach dem letzten Akkordeon-Slider noch ein leeres div-Element, der Klasse accordionCloser das zusammen mit dem passenden Stil im Stylesheet dazu dient, das Akkordeon durch eine einfache horizontale Linie abzuschließen. Dieses div muss direkt im Anschluss an den letzten Slider des Akkordeons im Quellcode auftreten.

Lizenz

Dieses Werk steht unter einer der sog. MIT-Lizenz entsprechenden Lizenz. Die Lizenz ist dem Download beigefügt.

Besonderheiten

  • Umschaltung bei Maus-Hover
  • Sanfte Animation
  • Fade-Effekt ein-/ausschaltbar
  • Ohne JavaScript-Kenntnisse verwendbar
  • Beliebig stylebar
  • Freie Software - von jedem kostenlos verwendbar

Viel Spaß beim Akkordeon-Spielen!

 
2 Kommentare