Cool & Responsive Accordion Plugin - liteAccordion

liteAccordion is a lightweight (~6kb) jQuery Accordion Plugin that allows you to add beautiful and cool Accordion effects on your webpages. You can use it for anything you like such as text,images,video,and etc...

Basic Usage:

1. Include jQuery library and necessary javascripts

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="liteaccordion.jquery.js"></script>

2. CSS

<link rel="stylesheet" href="liteAccordion.css">

3. HTML

<div>
<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>

4. Call the plugin

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

5. Options

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

responsive : false,                     // overrides the above three settings, accordion adjusts to fill container
autoScaleImages : false,                // if a single image is placed within the slide, this will be automatically scaled to fit
minContainerWidth : 300,                // minimum width the accordion will resize to
maxContainerWidth : 960,                // maximum width the accordion will resize to

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

6. Methods

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 (unstyled html content will remain)
debug                                   // returns a debug object

---

This awesome jQuery plugin is developed by nikki. For more Advanced Usages, please check the demo page or visit the official website.