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.

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!

Themenbereich Nützliches

11 Kommentare

Schlagwörter

Kommentare zu dieser Seite

1. Markus Thommessen bedauerte am 27.5.2013 um 14:05:

Hallo "plippo"!

Ich versuche dein HMTL-Akkordeon in eine Website einzupflegen, die mittels Jimdo erstellt wird.

Leider ist es dort nicht möglich, den <body> zu bearbeiten, sondern nur den <head>.

Kann man den Slider auch so zum Laufen zu bringen?

Ich habe es bereits im <head> versucht mit:
<script type="text/javascript"> accord_loader(); </script>

Leider ohne Erfolg.

2. Philipp antwortete am 30.5.2013 um 19:52:

Hallo Markus,

statt accord_loader in deinem Script direkt aufzurufen, kannst du es mit folgendem Code probieren:
<script type="text/javascript"> window.onload = accord_loader; </script>
(Wichtig: keine Klammern hinter accord_loader!)

3. urs beschwerte sich am 31.1.2014 um 17:55:

hallo

habe eine einfache html-seite erstellt und die scripts gemäss anleitung ausgeführt.
funktioniert überhaupt nicht

urs

4. Philipp entgegnete am 5.2.2014 um 21:52:

Geht's etwas genauer? Wenn ich helfen soll, muss ich schon wissen, wo das Problem ist. Auf dieser Seite funktioniert das Akkordeon ja auch.

5. Nicole sagte am 14.11.2014 um 16:36:

Hallo, ich habe auch versucht dein Script einzubinden. Leider scheitere ich irgendwo...

Hier mal der Link dazu: http://mein-finanz-profi.de/test
Ich arbeite mit dem System Worldsoft und hab hier irgendwie Probleme...

Der Quellcode im Inhalt:
<script type="text/javascript">
window.onload = accord_loader;
</script>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<meta content="application/xhtml+xml; charset=UTF-8" http-equiv="content-type" />
<meta content="text/css" http-equiv="content-style-type" />
<link href="http://mein-finanz-profi.de/wcms/ftp/m/mein-finanz-profi.de/staticfiles/sample.css" rel="stylesheet" type="text/css" />
<link href="http://mein-finanz-profi.de/wcms/ftp/m/mein-finanz-profi.de/staticfiles/accordion.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="/wcms/ftp/m/mein-finanz-profi.de/staticfiles/accordion.js"></script>
<div class="accordionSlider">
<div class="accordionSliderHead">
<h3>Slider 1</h3>
</div>

<div class="accordionSliderBody">
<div class="accordionSliderInBody">
<div>Das ist Slider 1<br />
Mit viel Inhalt<br />
Jawoll, das isser!</div>
</div>
</div>
</div>

<div class="accordionSlider">
<div class="accordionSliderHead">
<h3>Slider 2</h3>
</div>

<div class="accordionSliderBody">
<div class="accordionSliderInBody">
<div>Slider 2<br />
Inhalt<br />
Jawoll!</div>
</div>
</div>
</div>

<div class="accordionSlider">
<div class="accordionSliderHead">
<h3>Slider 3</h3>
</div>

<div class="accordionSliderBody">
<div class="accordionSliderInBody">
<div>Der Slider 3<br />
<a href="#">hat Inhalt</a><br />
Oh Jawoll!</div>
</div>
</div>
</div>

Und hier der Quellcode im Header / Kopfzeile:
<link href="http://mein-finanz-profi.de/wcms/ftp/m/mein-finanz-profi.de/staticfiles/accordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/wcms/ftp/m/mein-finanz-profi.de/staticfiles/accordion.js"></script>

Kannst du mir evtl. weiterhelfen und mir sagen, wo das Problem liegt oder bin ich ein hoffnungsloser Fall? ;-)

Danke im Voraus
Nicole

6. Philipp erklärte am 16.11.2014 um 14:04:

Hallo Nicole,
das Problem sind Zeilenumbrüche bzw. Leerzeichen in deinem Code. Aus bestimmten Gründen stören diese auf deiner Seite das Skript, während es auf meiner Beispiel-Seite und vielen anderen Seiten funktioniert. Du müsstest das Akkordeon bei dir so anpassen:

<div class="accordionSlider"> [ZEILENUMBRUCH ENTFERNEN]
<div class="accordionSliderHead">
<h3>Slider 1</h3>
</div>[ZEILENUMBRUCH ENTFERNEN]
[ZEILENUMBRUCH ENTFERNEN]
<div class="accordionSliderBody"> [ZEILENUMBRUCH ENTFERNEN]
<div class="accordionSliderInBody">
<div>Das ist Slider 1<br />
Mit viel Inhalt<br />
Jawoll, das isser!</div>
</div>
</div>
</div>

-> damit es dann so aussieht:
<div class="accordionSlider"><div class="accordionSliderHead">
<h3>Slider 1</h3>
</div><div class="accordionSliderBody"><div class="accordionSliderInBody">
<div>Das ist Slider 1<br />
Mit viel Inhalt<br />
Jawoll, das isser!</div>
</div>
</div>
</div>

Und das bei allen drei Slidern. Dann sollte es funktionieren. Sorry dass das Skript da nicht robuster ist. Ich hoffe es klappt!

Viele Grüße
Philipp

7. Rainer sagte am 2.12.2014 um 17:10:

Kann ich die Umschaltung auch per Klick anstatt Mouse-Over einstellen?

8. Philipp antwortete am 3.12.2014 um 17:11:

Sollte kein Problem sein, wenn man im Skript das mousemove durch ein mousedown ersetzt.

9. Tilla sagte am 27.1.2015 um 13:49:

Erstmal: Danke für das script!
Und meine Frage: Ist es einstellbar, dass auch der 1. Slider erst aufklappt, wenn man drüber fährt?
Dank im Voraus

10. Tilla sagte am 27.1.2015 um 20:39:

Ah, entsprechenden ?:-Operator gefunden.
Damit gelöst.
LG

11. Matze sagte am 6.10.2017 um 10:58:

Hallo,
ich würde gerne wissen, wo ich den Operator finde, damit auch der erste Slider zu Anfang eingeklappt bleibt. Außerdem, gibt es eine Möglichkeit, am Ende der Überschrift jeweils ein + und - einzufügen, je nach dem ob die Slider offen oder geschlossen sind?
Vilen Dank

☰ Menü