Image 1: Michelle Meiklejohn /

Image 2: Luigi Diamanti /

Image 3: Tina Phillips /

Image 4: Ahmet Guler /

Elegant Accordion with jQuery and CSS3

Code + Download


Usage & Options (Defaults)

Requires jQuery

	easing: 'swing',	// Anything other than "linear" or "swing" requires the easing plugin
	autoPlay: true,		// This turns off the entire FUNCTIONALY, not just if it starts running or not
	startStopped: false,	// If autoPlay is on, this can force it to start stopped
	stopAtEnd: false,	// If autoplay is on, it will stop when it reaches the last slide
	delay: 4000,		// How long between slide transitions in AutoPlay mode
	animationTime: 100, // How long the slide transition takes
	hashTags: true,		// Should links change the hashtag in the URL?
	pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
	height: null,		// Override the default CSS height
	expandedWidth: '60%',	// Width of the expanded slide
	neutralState: false // If there should be a state when all pages are equal size (usually onMouseOut)
	bgHeight: '340px'	// The height of the gradient image (bgDescription.png). Useful if you're modifying the image

Linking directly to slides



Version 0.3

Version 0.2.1

Version 0.2

Version 0.1