Looking for a jQuery plugin to create a horizontal accordion?
We were too, years ago: we needed a simple and clean solution for one of our projects and, at a first glance, Slidedeck seemed to be what we was looking for. Unfortunately, this turned out to be not that flexible as I wished it to be.

Hence, we decided to create our own horizontal accordion plugin.

Here you will find out step by step explanation for it, and the source code: feel free to use it and please, if you don’t mind, give us credit in your code or with a backlink to this page.

Why writing a jQuery Easy Accordion Plugin?

As soon as we purchased the Slidedeck plugin for 99$ we found out few things that made us pretty upset.

Firstly, we wanted to amend the script in order to slighlty change the accordion behaviour but we soon realized that we couldn’t do anything because the plugin we purchased was totally encrypted. This makes completely sense to us, because otherwise people might share the code and give it away for free. Although, the annoying down side is that you spend 99$ and you get something that you cannot modify at all.

Besides, IE6 was not supported and this wasn’t clear at all from the Slidedeck website. Now, we now what you’re thinking… “IE6? That’s a dead browser man! Why would you expect any support for it?” Well, we totally agree that we should all drop support for IE6, nevertheless we happen to have clients that still need their websites to look at least fine in IE6. And no, we can’t get rid of them!

For all these reasons we opted to make our own accordion plugin.

This was definitely a tougher challenge than the one we took on with the Easy List Splitter plugin. Creating such a plugin is much more complicated and took us several nights and weekends to get it done and to make it working cross-browsers. The result is pretty good and hopefully it will help you whenever you need a highly flexible horizontal slider able to show any kind of content (text, images, lists, etc.).

A special thanks goes to Andrew Thompson because without his priceless help we would still be there trying to make multiple instances working on the same page.

How does Easy Accordion Plugin work?

Easy Accordion plugin will get your definition lists (DTs) and generate a nice and smooth horizontal accordion. You can then decide to make it a timed slideshow or leave it still.

You can see the Easy Accordion Plugin in action down below. As usual, all of that will be realized in an unobtrusive, SEO friendly and accessible way.

See the Easy Accordion Plugin in action (Demo)
Download the Easy Accordion Plugin code on GitHub

What’s new in it?

Easy Accordion Plugin keeps the HTML to the minimum, is SEO friendly and fully accessible, uses the CSS rotation to rotate the slide titles (no need for images here!), works in all the major browsers, allows for autoplay, it’s opensource and fully customizable and, what count most, it’s free!

jQuery Easy Accordion Plugin Features

  • Easily create a nice and smooth accordion effect
  • Decide whether or not automatically animate your slider
  • Insert multiple instances of the accordion in the same page
  • Set the active slide when the user loads the page
  • Include or remove the slide number
  • Text is rotated using CSS properties. No need for images!
  • Easy Accordion is totally customizable via CSS: change height, width, set borders and paddings, use background images and so on
  • Accessible and SEO friendly
  • Slide any kind of content (divs, simple text, images, lists, etc.)
  • Less than 8KB!
  • No dependencies at all!

How to use the Easy Accordion Plugin by MADE IN CIMA

Here is the HTML code for a simple definition list wrapped into a div container:

<div id="your-container">
   <dl>
      <dt>Title slide</dt>
      <dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
      <dt>One more</dt>
      <dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
      <dt>Another slide</dt>
      <dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
   </dl>
</div>

 

We need now to include three different files in the head of the document: the jQuery library, the Easy Accordion plugin and our Script file from where we’re going to call the plugin. If you do not know yet how to set up your jQuery environment, you can find a detailed explanation here, otherwise just keep reading!

You can target any definition list using the powerful JQuery-selectors. The plugin accepts different arguments.

Parameters

Make sure you wrap your definition list into a div container and call the plugin on the div element and not on the definition list straight away:

$('#your-container').easyAccordion();

If you don’t pass any parameter to the plugin it will generate a simple accordion with slide numbers and no autoplay by default. To see the hidden slides userswill have to click on the respective slide titles.

To enable the autoplay you simply have to set the “autoStart” parameter to “true” and the “slideInterval” ( in milliseconds) to a number as follow:

$('#your-container').easyAccordion({
 autoStart: true,
 slideInterval: 5000
 });

In this example the plugin will move to the next slide every 5 seconds. As soon as it gets to the last slide it starts over again. If you click on one of the slides the slideshow stops so that the user can easily read the content or move back and forth.

You can also remove the slide numbers by setting the “slideNum” parameter to “false” as follow:

$('#your-container').easyAccordion({
 autoStart: true,
 slideInterval: 3000,
 slideNum: false
 });

Apply your CSS

In the demo page you will find two different bits of CSS marked with CSS comments. The first one shouldn’t be changed unless you’re really confident in what you’re doing. The second one, instead, can be updated in order to customize your accordion for your needs.

Browser support

The jQuery Easy Accordion plugin has been tested on the following browsers:
Firefox 3.5+, IE6/7/8, Safari 5+ and Google Chrome.

Conclusion

You can get the Easy Accordion plugin full sample here (250KB – zip file) or get the JavaScript file only.