Download

More information and download link on the original blog post.

FAQ

Q. Why is this plugin called ‘liteAccordion’?
A. It is called liteAccordion because the minified JS source only weighs 6kb. If you gzip the minified JS, you can get the file size down to 2kb!
Q. What can I use it for?
A. Anything you like! Text, images, video – anything you can put in a <div>, you can put in a slide.
Q. Is it responsive?
A. liteAccordion is not responsive. For responsive functionality, you should take a look at Accordion Pro JS and Accordion Pro WP.
Q. What themes are available?
A. Originally, liteAccordion had two themes – ‘basic’ and ‘dark’. In version 2, two more themes were added – ‘light and stitch’. These themes are based on Orman Clark’s work over at Premium Pixels. Well worth checking out if you need some design inspiration.
Q. What’s the difference between this and Accordion Pro JS?
A. liteAccordion is no longer actively maintained, whereas Accordion Pro JS is regularly updated with upgrades and new features. Check out the comparison table to see the differences at a glance.
Q. Does it work in…
A. It’s been tested on the latest versions of Firefox, Chrome, Safari and Opera. It has also been tested on IE8, IE9 & IE10.
Q. But it doesn’t work in IEx!
A. It works in the native versions of IE. When you use, for example, IE9 in IE8 developer mode, it’s not the same as using IE8 proper. The rendering engine (Trident) applies both the CSS styles for IE8, and for IE9. This creates a conflict that causes the accordion to display incorrectly. The plugin has been tested in IE8, IE9, and IE10 – everything functions properly.
Q. Sounds good! Can I use it for commercial projects?
A. liteAccordion is free to use for commercial and personal projects. As long as you’re not trying to sell this plugin ‘as is’, feel free to do with it as you please.
Q. What should I do if I find a bug?
A. If you find any bugs, please file a ticket on Github and I’ll fix it as soon as possible. Thanks!

Examples

Basic Example

This is a demonstration of the default implementation, with some text content added to the slides.

Linkable

To link to individual slides, set a data-slide-name property on the list item, and link to it in an <a> tag:

<a href="#slide-one">one</a>

Links: one two three four five

$('#yourdiv').liteAccordion({
    theme : 'dark',
    rounded : true,
    enumerateSlides : true,
    firstSlide : 2,
    linkable : true
});

Mouseover activation

$('#yourdiv').liteAccordion({
    theme : 'light',
    firstSlide : 3,
    activateOn: 'mouseover'
});

How to use

1. Include jQuery, the liteAccordion CSS and the liteAccordion JavaScript files in your page:

<head>
    <link rel="stylesheet" href="liteAccordion.css">
</head>
<body>
    ... 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="liteaccordion.jquery.js"></script>
</body>

2. Insert the basic liteAccordion markup into your page:

<div id="yourdiv">
    <ol>
        <li>
            <h2><span>Slide One</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Two</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Three</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Four</span></h2>
            <div></div>
        </li>
        <li>
            <h2><span>Slide Five</span></h2>
            <div></div>
        </li>
    </ol>
    <noscript>
        <p>Please enable JavaScript to get the full experience.</p>
    </noscript>
</div>

3. Call the plugin

<script>
    $('#yourdiv').liteAccordion();
</script>

Options

These are the default settings for the liteAccordion plugin:

containerWidth : 960,                   // fixed (px)
containerHeight : 320,                  // fixed (px)
headerWidth: 48,                        // fixed (px)

activateOn : 'click',                   // click or mouseover
firstSlide : 1,                         // displays slide (n) on page load
slideSpeed : 800,                       // slide animation speed
onTriggerSlide : function() {},         // callback on slide activate
onSlideAnimComplete : function() {},    // callback on slide anim complete

autoPlay : false,                       // automatically cycle through slides
pauseOnHover : false,                   // pause on hover
cycleSpeed : 6000,                      // time between slide cycles
easing : 'swing',                       // custom easing function

theme : 'basic',                        // basic, dark, light, colorful, or stitch
rounded : false,                        // square or rounded corners
enumerateSlides : false,                // put numbers on slides
linkable : false                        // link slides via hash

To instantiate the plugin, pass your options into liteAccordion like so:

$('#one').liteAccordion({
    onTriggerSlide : function() {
        this.find('figcaption').fadeOut();
    },
    onSlideAnimComplete : function() {
        this.find('figcaption').fadeIn();
    },
    autoPlay : true,
    pauseOnHover : true,
    theme : 'stitch',
    rounded : true,
    enumerateSlides : true
}).find('figcaption:first').show();

Methods

These are the methods for the liteAccordion plugin:

play                                    // trigger autoPlay on a stopped accordion
stop                                    // stop an accordion playing
next                                    // trigger the next slide
prev                                    // trigger the previous slide
destroy                                 // remove the accordion, destroying all event handlers and styles
debug                                   // returns a debug object

All of these methods are chainable (i.e. they return the original DOM object) with the exception of the debug method. To call a method, use:

$('#yourdiv').liteAccordion('play');

To chain methods:

$('#yourdiv').liteAccordion('next').liteAccordion('next');

Changelog

Version 2.2 (21/01/13)

Responsive layout and auto scale images options removedAfter some consideration, I’ve decided to remove the responsive options. In it’s current format, the accordion works well on mobile devices, but the mechanics of the interface are not suited to responsive designs (for example, the headers are too small to activate on mobile devices).

Development status: on indefinite hiatusAfter this update, I do not plan to continue developing this plugin. Regrettably, I can no longer respond to support emails – please be sure to read the blog post comments if you have any issues, as 99% of them will have been discussed there.

New in 2.0! (16/11/11)

MethodsliteAccordion now has play, stop, trigger next slide, trigger previous slide, destroy and debug methods.

Mouseover activationSlides can now be activated onmouseover.

Custom easingThe plugin now supports custom easing functions (easeOutBounce is one of my favourites :)) using George McGinley Smith’s jQuery Easing plugin. If you’re not planning on making use of this (i.e. if you’re using the linear or swing easing types), you don’t need to include jquery.easing.1.3.js in your page.

Linkable slidesYou can now link to individual slides by assigning a name to a slide in your html, and setting the ‘linkable’ option to true.

Two new themesv2 features two new themes: the ‘light’ theme, and the ‘stitch’ theme. The light theme is very similar to the ‘dark’ theme, but with inverted colours. The stitch theme is based on Orman Clark’s awesome work (again :p) over on Premium Pixels.

Demo suite availableDuring development, I created a tool to let me try out different combinations of settings without reloading the page. Try it out for yourself here.

New in 1.1! (23/03/11)

In version 1.1, a pause on hover function was added to the plugin.

Licence

liteAccordion is released under the MIT licence.

Attribution

Themes are based on some lovely freebie designs by Orman Clark. Thanks Orman!