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!
liteAccordion now has a responsive layout option. If you set { responsive : true } in the plugin options, the accordion will now stretch to fit your page's responsive design. This also works on mobile devices when the orientation of the device is changed. Check out the demo on desktop or mobile here. Use the minContainerWidth and maxContainerWidth options in conjunction with the responsive option, to limit the minimum and maximum ranges your accordion can scale to.
Auto scale imagesIf you plan to use liteAccordion as an image slider, there is now an option to scale images contained in a slide to automatically fit the slide dimensions. This works in both responsive and fixed width modes. Check out the responsive demo to see it in action.
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) 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, 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: ezio imperial zelda man down! crashy crashy
$('#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!