HTML Accordion

This is an implementation of the widely used accordion design pattern in JavaScript and HTML. It can be embedded in any HTML page.

If JavaScript is not enabled in the browser, the accordion effect doesn't work but instead all sliders are expanded. This way, all content is also available without JavaScript.

1. Download and Unpack

Please download the following ZIP archive: accordion.zip. Unpack it and put the contained files into the folder that contains the HTML file you want to use the accordion in.

2. Prepare HTML File

Please paste the following code snipped into the <head> area of your HTML file:

<link href="accordion.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="accordion.js"></script>

Please change the <body> element of your HTML file by adding the bold text:

<body onload="accord_loader()">

3. Create Accordion

You can create the accordion now at any place inside the <body> by adding for each slider subsequently the following code block:

<div class="accordionSlider"><div class="accordionSliderHead">
Title
</div><div class="accordionSliderBody"><div class="accordionSliderInBody">
Content
</div></div></div>

4. Styling

The accordion can be styled as you like using CSS. Each slider is surrounded by a div of the class .accordionSlider. The style of this element can be changed almost freely (but you should’nt change position, display and float so the accordion keeps working). For the classes .accordionSliderHead, .accordionSliderBody and .accordionSliderInBody you may only change the style of background and text, not the border (border, padding and margin must be untouched!)

The stylesheet of the accordion you see on this page can be found here.

Hint

For the accordion to work, it’s best if all sliders have the same height, but it’s not required. You can use the following line in your stylesheet to make all sliders have the same height and only get higher if neccessary to contain all content:

.accordionSliderInBody { min-height:16em }

Example

The following ZIP archive contains a very simple accordion, including style sheet: accordion-sample.zip. It can be extended as you like.

License

This work is provided under an MIT style License. The license is included in the download.

Special Features

Sliding on mouse hover
Smooth animation
Optional fading effect
Doesn’t need any external libraries
No JavaScript knowledge required
Freely styleable
Free Software - everybody can use it as they want

I hope you enjoy playing the accordion!

Topic Useful

11 comments

Tags

Comments about this page

#1 Markus Thommessen regretted on May 27, 2013 at 14:05 in German:

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 answered on May 30, 2013 at 19:52 in German:

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 complained on Jan 31, 2014 at 17:55 in German:

hallo

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

urs

#4 Philipp responded on Feb 5, 2014 at 21:52 in German:

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 said on Nov 14, 2014 at 16:36 in German:

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 explained on Nov 16, 2014 at 14:04 in German:

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 said on Dec 2, 2014 at 17:10 in German:

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

#8 Philipp answered on Dec 3, 2014 at 17:11 in German:

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

#9 Tilla said on Jan 27, 2015 at 13:49 in German:

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 said on Jan 27, 2015 at 20:39 in German:

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

#11 Matze said on Oct 6, 2017 at 10:58 in German:

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

☰ Menu