# liteAccordion - a horizontal accordion plugin for jQuery

1. ## Slide One

   Assassini!

2. ## Slide Two

   Couldn't find an image of a Khajit thief! Fail!

3. ## Slide Three

   That's one angry looking red dude.

4. ## Slide Four

   Was fun for a couple of hours or so...

5. ## Slide Five

   Not as good as Hot Pursuit.

## Download

More details and download here

## FAQ

Q. Why is this plugin called 'liteAccordion'?
  A. It is called liteAccordion because the minified JS source only weighs 4kb. If you gzip the minified JS, you can get the file size down to 1.6kb!
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. But my page isn't 960px wide...
  A. Not a problem. The plugin has a range of options, and I've tried to use relative measurements in the css so that the styles scale.
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. Does it work in...
  A. It's been tested on the latest versions of Firefox, Chrome, Safari and Opera on both OSX and W7. It has also been tested on IE7, IE8 & IE9 on W7. Unfortunately IE6 is not supported - you will need to provide your own css if you plan to support IE6.
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.

If you find any bugs, please file a ticket on Github and I'll fix it as soon as possible. Thanks!

## New in 2.0! (16/11/11)

Methods:

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

Mouseover activation

Slides can now be activated onmouseover.

Custom easing

The 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 slides

You 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 themes

v2 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 available

During 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.

## Basic Implementation

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:

1. ##

2. ##

3. ##

4. ##

5. ##

                        Slide One

                        Slide Two

                        Slide Three

                        Slide Four

                        Slide Five

3. Call the plugin

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

## Basic Example

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

1. ## Slide One

   ### This is Slide One.

   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Link somewhere

2. ## Slide Two

   ### This is Slide Two.

   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
   Link somewhere

3. ## Slide Three

   ### This is Slide Three.

   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Link somewhere

4. ## Slide Four

   ### This is Slide Four.

   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.
   Link somewhere

5. ## Slide Five

   ### This is Slide Five.

   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Link somewhere

## 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, or stitch
                rounded : false,                        // square or rounded corners
                enumerateSlides : false,                // put numbers on slides
                linkable : false                        // link slides via hash

Simply pass options into the liteAccordion function with an object literal, for example, below is the code for the accordion at the top of the page.

                $('#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');

## More Examples

1. ## Slide One

2. ## Slide Two

3. ## Slide Three

4. ## Slide Four

5. ## Slide Five

Links: ezio imperial zelda man down! crashy crashy

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

1. ## Slide One

2. ## Slide Two

3. ## Slide Three

4. ## Slide Four

5. ## Slide Five

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

## Licence

liteAccordion is released under the MIT licence.

## Attribution

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