liteAccordion - a horizontal accordion plugin for jQuery

  1. Slide One

    image
    I can haz big caek?

  2. Slide Two

    image
    Whoops.

  3. Slide Three

    image
    Some caption text goes in here...

  4. Slide Four

    image
    Pew pew pew!

  5. Slide Five

    image
    More caption text here!

Download

Get liteAccordion from Github

FAQ

Q. Why is this plugin called 'liteAccordion'?
A. It is called liteAccordion because the raw JavaScript source only weighs a (heavily commented!) 4.5kb, and the themes don't use any background images. If you minify and gzip the JS, you can get the file size down to ~1.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. 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. There are currently two themes available, 'basic' and 'dark', though I plan to add a light theme and a stitch theme based on Orman Clark's stitch theme for SlideDeck in the very near future. If these themes aren't suitable, you can always customise the css :)
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.
Q. Sounds good! Can I use it for commercial projects?
A. liteAccordion is released under the MIT license, so it's free to use for commercial and personal projects.

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

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.4.4/jquery.min.js"></script>
				<script src="liteaccordion.jquery.js"></script>
			</body>

2. Insert the basic liteAccordion markup into your page:

		

		    
    
				
  1. 
				    
    Slide One
    
				    
    
				
    2. 
				
  2. 
				    
    Slide Two
    
				    
    
				
    3. 
				
  3. 
				    
    Slide Three
    
				    
    
				
    4. 
				
  4. 
				    
    Slide Four
    
				    
    
				
    5. 
				
  5. 
				    
    Slide Five
    
				    
    
				
    6.

3. Call the plugin

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

Basic Example

This is a demonstration of the default implementation above, 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, 			// width of accordion (px)
			containerHeight : 320, 			// height of accordion (px)
			headerWidth : 48, 				// width of tabs (px)

			firstSlide : 1, 				// number of the first active slide (integer)
			onActivate : function() {},		// callback function triggered on tab click/mouseover (function)
			slideSpeed : 800,				// speed of slide animation (time/ms)
			slideCallback : function() {},	// callback function triggered after slide animation is complete (function)

			autoPlay : false, 				// automatically scroll through the slides, if true with pause on user click (boolean)
			cycleSpeed : 6000,				// time between slide activation (time/ms)

			theme : 'basic', 				// which theme to use ('basic', 'light'*, 'dark', or 'stitch'*)
			rounded : false,				// whether to use rounded corners or not** (boolean)
			enumerateSlides : false			// show slide number in tab

(* coming soon, **doesn't work in IE)

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({
				onActivate : function() {
					this.find('figcaption').fadeOut();
				},
				slideCallback : function() {	
					this.find('figcaption').fadeIn();
				},
				autoPlay : true,
				theme : 'dark',
				rounded : true,
				enumerateSlides : true				
			}).find('figcaption:first').show();

Note: the context for the two callback functions is the (jQuery wrapped) slide div (adjacent to the tab trigger).

More Examples

  1. Slide One

    image

  2. Slide Two

    image

  3. Slide Three

    image

  4. Slide Four

    image

  5. Slide Five

    image 
$('#yourdiv').liteAccordion({ 
	theme : 'dark', 
	containerWidth : 600, 
	containerHeight : 200, 
	slideSpeed : 600, 
	firstSlide : 2 
});

Licence

The liteAccordion plugin is free for personal and commercial use, providing that the copyright notices are left intact. You may freely include this jQuery plugin in websites, web applications, templates, themes, and other materials intended for sale and/or distribution. You are not permitted to offer this plugin for distribution and/or resale 'as is' without prior consent.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Attribution

The 'dark' theme was inspired by Orman Clark. Thanks Orman! :)