This plugin enables an accordion that can use cookies to persist between pages or visits. This plugin works with the latest jQuery release 1.5.

If you find any errors or have suggested changes, please post a comment on the github project: http://github.com/juven14/Accordion

You have to create your own html for the accordion. You need a header element (here as h3, can be div or etc) that gets the "accordion" class assigned and a body element. However, the slide effect will be choppy if you have margins and padding for the container, so here I just use a div. I've used "accordion" but you can choose any other selector, also i have added classes to aid with styling, and the containers do not have to have these class names. Note that there is a slight jump on some panels due to the way jQuery handles slideUp and slideDown, see the custom javascript panel below for better sliding. Here is an example:

<h3 class="accordion" id="section1">Heading<span></span><h3>
<div class="container">
	<div class="content">
		<h3>Sample Content</h3>
		<p>Content here....</p>
	</div>
</div>
<h3 class="accordion" id="section2">Heading<span></span><h3>
<div class="container">
	<div class="content">
		<h3>Sample Content</h3>
		<p>Content here....</p>
	</div>
</div>
<h3 class="accordion" id="section3">Heading<span></span><h3>
<div class="container">
	<div class="content">
		<h3>Sample Content</h3>
		<p>Content here....</p>
	</div>
</div>

JavaScript which belongs in the head of the html document, using the cookie plugin is optional. Please note that our default open / config is only an example.

<script type="text/javascript" src="javascript/jquery.cookie.js"></script>
<script type="text/javascript" src="javascript/jquery.accordion.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('.accordion').accordion({defaultOpen: 'some_id'});
	});
</script>

The plugin default options are as follows:

{
	cssClose: 'accordion-close', //class you want to assign to a closed accordion header
	cssOpen: 'accordion-open', //class you want to assign an opened accordion header
	cookieName: 'accordion', //name of the cookie you want to set for this accordion
	cookieOptions: { //cookie options, see cookie plugin for details
		path: '/',
		expires: 7,
		domain: '',
		secure: ''
	},
	defaultOpen: '', //id that you want opened by default
	speed: 'slow', //speed of the slide effect
	bind: 'click', //event to bind to, supports click, dblclick, mouseover and mouseenter
	animateOpen: function (elem, opts) { //replace the standard slideDown with custom function
		elem.next().slideDown(opts.speed);
	},
	animateClose: function (elem, opts) { //replace the standard slideUp with custom function
		elem.next().slideUp(opts.speed);
	}
}

Details

• cssClose - class assigned when closed
• cssOpen - class assigned when opened
• cookieName - cookie name for persisting panels
• cookieOptions - see jquery.cookie plugin for more info
• defaultOpen - id that you want opened by default
• speed - animation speed
• bind - event that triggers the collapsible, only 4 are supported:
  click, dblclick, mouseenter, and mouseover
• animateOpen - custom callback to animate opening
• animateClose - custom callback to animate closing

In the above example HTML you will see a span, this is useful if you wish to assign an open/close image.

This plugin will append a user defined (or default, see options above) class to header of the accordion. You can use this to swap out the images or style the different states of your accordion.

.accordion h3.collapse-open {}
.accordion h3.collapse-close {}
.accordion h3.collapse-open span {}
.accordion h3.collapse-close span {}

You can additionally add in custom animation functions such as below:

$(document).ready(function() {

	//custom animation for open/close
	$.fn.slideFadeToggle = function(speed, easing, callback) {
		return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
	};

	$('.accordion').accordion({
		defaultOpen: 'section1',
		cookieName: 'nav',
		speed: 'slow',
		animateOpen: function (elem, opts) { //replace the standard slideUp with custom function
			elem.next().slideFadeToggle(opts.speed);
		},
		animateClose: function (elem, opts) { //replace the standard slideDown with custom function
			elem.next().slideFadeToggle(opts.speed);
		}
	});
});

@CHARSET "UTF-8";
#left_nav {
	width:250px; }
#body {
	width:700px; }
#left_nav,
#body {
	float:left;
	margin:10px; }
.collapsible,
.page_collapsible,
.accordion {
	margin: 0;
	padding:10px;
	height:20px;
	border-top:#f0f0f0 1px solid;
	background: #cccccc;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration:none;
	text-transform:uppercase;
	color: #000;
	font-size:1em; }
.accordion-open,
.collapse-open {
	background:#000;
	color: #fff; }
.accordion-open span,
.collapse-open span {
	display:block;
	float:right;
	padding:10px; }
.accordion-open span,
.collapse-open span {
	background:url(../images/minus.png) center center no-repeat; }
.accordion-close span,
.collapse-close span {
	display:block;
	float:right;
	background:url(../images/plus.png) center center no-repeat;
	padding:10px; }
div.container {
	padding:0;
	margin:0; }
div.content {
	background:#f0f0f0;
	margin: 0;
	padding:10px;
	font-size:.9em;
	line-height:1.5em;
	font-family:"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; }
div.content ul, div.content p {
	padding:0;
	margin:0;
	padding:3px; }
div.content ul li {
	list-style-position:inside;
	line-height:25px; }
div.content ul li a {
	color:#555555; }
code {
	overflow:auto; }