Skip navigation

Please note: This is an old version of my website that is here only for historical reasons and will no longer be updated. The current pages can be found on the new plippo.de.

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.

Example Accordion with Explanation and Download

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 }
Use the following line so all sliders have the same height and get scrollbars if they have too much contents (may result in flickering in Firefox): 
.accordionSliderInBody { height:16em; overflow:auto }

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!