Accordion v2.0

Finally a lightweight accordion that is built with scriptaculous and works properly in every browser.

Changelog

What's new in v2.0?

Well i listened to all you guys out there in my forum and my blog and now all those wishes have been granted!

  • Open/Close functionality added (Click on an active accordion).
  • Nested Vertical Accordions
  • Accordions will dynamically resize on content added REAL TIME!
  • ...lots of bug fixes!

Why another Accordion?

Uhm... There wasn't one, well not a good one.

Haha! Like there was one. Well there was, but only for Rico and a bloated one by mootools, that's right I said bloated, live with it. For some reason there wasn't one for scriptaculous but now there is. The why is pretty simple, just like every other library, I had a need for it. Hope you can get some use out of it.

Oh, by the way, not only does this script handle vertical accordions, but horizontal as well!

A Horizontal Accordion! (Nested)

Oh yeah, just a few options... BAM Horizontal!

Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit.

Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Curabitur quam lorem, laoreet molestie, eleifend id, pulvinar vel, nunc. Proin congue felis quis purus. Aenean porttitor, lacus vel bibendum pulvinar, leo nulla suscipit leo, nec lobortis orci diam eget turpis. Sed eu eros et orci consectetuer molestie. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat.

Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit. Nulla suscipit, elit quis pretium hendrerit, nisi sapien lobortis libero, et consectetuer lorem sapien id urna.

A Vertical Nested Accordion!

Hablo pig-latin?

Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit.

Isn't this kewl?'

Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Click me!

Curabitur quam lorem, laoreet molestie, eleifend id, pulvinar vel, nunc. Proin congue felis quis purus. Aenean porttitor, lacus vel bibendum pulvinar, leo nulla suscipit leo, nec lobortis orci diam eget turpis. Sed eu eros et orci consectetuer molestie. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Don't you dare....'

Sed at pede vitae turpis porta condimentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla facilisi. Morbi erat.

Your Mom!

Integer commodo nibh sit amet odio. Pellentesque semper. Integer dolor. Donec scelerisque sapien placerat velit. Nulla suscipit, elit quis pretium hendrerit, nisi sapien lobortis libero, et consectetuer lorem sapien id urna.

Download the code!

Download

Get it here Accordion v2.0

How to Use

Include the files

You need to include accordion.js but it requires prototype.js and effects.js (like I said this is for scriptaculous!). As long as you are using at least the latest stable builds you are fine.

<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript" src="javascript/accordion.js"></script>

The Markup

Pretty much anything will work, so its really up to you. The presentation is up to you (see the source of this page for some examples). Ideally you should probably use header tags with div's containing the content as this would be best symantically speaking and for seo. Below is a basic example.

<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>
...
...
...
<h2 class="accordion_toggle">Title Bar</h2>
<div class="accordion_content">...</div>

The important thing here is that it need to be the title element then the content element and so on, nothing in between, just like every other accordion.

The Options

Not many options, but all you need to make this thing do anything you may require!

// The speed of the accordion
resizeSpeed : 8,
// The classnames to look for
classNames : {
	// The standard class for the title bar
    toggle : 'accordion_toggle',
    // The class used for the active state of the title bar
    toggleActive : 'accordion_toggle_active',
    // The class used to find the content
    content : 'accordion_content'
},
// If you don't want the accordion to stretch to fit 
// its content, set a value here, handy for horixontal examples.
defaultSize : {
    height : null,
    width : null
},
// The direction of the accordion
direction : 'vertical',
// Should the accordion activate on click or say on mouseover? (apple.com)
onEvent : 'click'

Now these are the default options set automatically, so let's now take a look on how to create an accordion and change those options.

The Javascript

Below is how I created the two accordions you see on this page, one vertical, one horizontal with a specified width.

// General Syntax
new accordion('container-selector', options);

// Horizontal example
var horizontalAccordion = new accordion('#top_container', {
    classNames : {
        toggle : 'horizontal_accordion_toggle',
        toggleActive : 'horizontal_accordion_toggle_active',
        content : 'horizontal_accordion_content'
    },
    defaultSize : {
        width : 525
    },
    direction : 'horizontal'
});

// Vertical Accordion
var verticalAccordion = new accordion('#bottom_container');

Ok, so now we know how to do the markup, hopefully you got creative with the css and looked at the source of this page to get started, and not you know how make an accordion. What if you want to use javascript to open a slide on load or at any time... here is how.

// Let's create it
var verticalAccordion = new accordion('#bottom_container');

// Now lets open the first slide
verticalAccordion.activate($$('#bottom_container .accordion_toggle')[0]);

So we use the selector method from prototype to get the first title bar from the container+classname and we want the first one so we use [0]. Couldn't be easier!

Preload

So let's say you want all your accordions closed on page load but don't want the nasty flash and don't want to sacrifice accessibility.

// Special thanks go out to Will Shaver @ http://primedigit.com/
var verticalAccordions = $$('.accordion_toggle');
verticalAccordions.each(function(accordion) {
    $(accordion.next(0)).setStyle({
        height: '0px'
    });
});