Arbeit
NützlichesSprache/Language
- deutsch (gewählt)
- english
Akkordeon – Ein vertikales Accordion für HTML
Dies ist eine Umsetzung des Accordion Design Pattern für dynamisches HTML. Es kann in beliebige HTML-Seiten eingebettet werden.
Wenn in Ihrem Browser JavaScript deaktiviert ist, funktioniert das Akkordeon nicht, sondern alle Slider sind ausgeklappt.
Beispiel-Akkordeon mit Anleitung und Download
1. Herunterladen und entpacken
Laden Sie das folgende ZIP-Archiv herunter: 
accordion.zip.
Entpacken Sie es und speichern Sie die enthaltenen Dateien in dem Ordner, in dem sich die HTML-Datei befindet,
in der Sie das Akkordeon verwenden möchten.
accordion.zip.
Entpacken Sie es und speichern Sie die enthaltenen Dateien in dem Ordner, in dem sich die HTML-Datei befindet,
in der Sie das Akkordeon verwenden möchten.
2. HTML-Datei vorbereiten
Fügen Sie in den
<head>-Bereich Ihrer HTML-Datei folgenden kleinen Codeschnipsel ein:
<link href="accordion.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="accordion.js"></script>Ändern Sie das
<body>-Element Ihrer HTML-Datei ab, indem Sie das fett Markierte hinzufügen:
<body onload="accord_loader()">
3. Akkordeon erstellen
Erstellen Sie nun das Akkordeon an einer beliebigen Stelle innerhalb des
<body>, indem Sie nacheinander für jeden Slider folgenden Codeblock hinzufügen:
<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. Verwenden Sie zum Beispiel
folgende Zeile in Ihrem Stylesheet, damit alle Slider eine bestimmte Höhe haben und nur im »Notfall« größer werden:
.accordionSliderInBody { min-height:16em }
Und folgende, damit die Slider immer die selbe Höhe haben, aber bei Bedarf Scrollbars angezeigt werden (sorgt leider im Firefox für Flimmern):
.accordionSliderInBody { height:16em; overflow:auto }
Beispiel
Folgendes ZIP-Archiv enthält ein sehr einfaches Akkordeon, inklusive
Stylesheet: accordion-sample.zip.
Es kann beliebig erweitert werden.
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.
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!