More details and download here.
If you find any bugs, please file a ticket on Github and I'll fix it as soon as possible. Thanks!
After 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.
liteAccordion 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.
In version 1.1, a pause on hover function was added to the plugin.
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>
<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>
This is a demonstration of the default implementation, but with some text content added to the slides.
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
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
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
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
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
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();
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');
Links: one two three four five
$('#yourdiv').liteAccordion({
theme : 'dark',
rounded : true,
enumerateSlides : true,
firstSlide : 2,
linkable : true,
easing: 'easeInOutQuart'
});
$('#yourdiv').liteAccordion({
theme : 'light',
firstSlide : 3,
easing: 'easeOutBounce',
activateOn: 'mouseover'
});
liteAccordion is released under the MIT licence.
Themes are based on some lovely freebie designs by Orman Clark. Thanks Orman!