api.jqueryui.com

The markup of your accordion container needs pairs of headers and content panels:

<div id="accordion">
		    <h3><a href="#">First header</a></h3>
		    <div>First content</div>
		    <h3><a href="#">Second header</a></h3>
		    <div>Second content</div>
		</div>

If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'a.header'. The content element must be always next to its header.

If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.

Use activate(Number) to change the active content programmatically.

NOTE: If you want multiple sections open at once, don't use an accordion

An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:

jQuery(document).ready(function(){
			$('.accordion .head').click(function() {
				$(this).next().toggle();
				return false;
			}).next().hide();
		});

Or animated:

jQuery(document).ready(function(){
			$('.accordion .head').click(function() {
				$(this).next().toggle('slow');
				return false;
			}).next().hide();
		});

• active

  Type:Integer, Boolean

  Default:0

  Select the active (open) panel by zero-based index. Negative values select backward from the last. When collapsible: true, active: false closees the accordion, otherwise setting active to false will have no effect.

• animated

  Type:

  Default:slide

  Choose your favorite animation, or disable them (set to false). In addition to the default, 'bounceslide' and all defined easing methods are supported ('bounceslide' requires UI Effects Core).

• collapsible

  Type:

  Default:false

  Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).

• event

  Type:

  Default:click

  The event on which to trigger the accordion. For hover, use 'mouseover'.

• header

  Type:

  Default:> li > :first-child, > :not(li):even

  Selector for the header element. Must be a selector that applies to the accordion container element, via .find(). The default covers both ui/li accordions, as well as flat structures like dl/dt/dd

• heightStyle

  Type:

  Default:auto

  Controls the height of the accordion and each panel.

  Possible values:

  auto

  all panels will be set to the height of the tallest panel

  fill

  expand to the available height based on the accordion's parent height

  content

  each panel will only be as tall as its content

• icons

  Type:

  Default:{ "header": "ui-icon-triangle-1-e", "headerSelected": "ui-icon-triangle-1-s" }

  Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by jQuery UI ThemeRoller

• refresh( )

  Recomputes panel dimensions.

• explode( pieces, [implode] )

  Make the accordion explode

  • pieces: Number, Number of pieces to explode into
  • implode: Boolean, Set to true to make the accordion implode. Leave default-false to explode.

• beforeActivate( event, ui )

  Triggered directly after a panel is activated. Can be cancelled to prevent the panel from activating.

  • event: Event, Type depends on event option. Commonly would be click or mouseover.
  • ui: Object, Extra event data for the ui accordion beforeActivate event
    • newContent: jQuery
    • newHeader: jQuery
    • oldContent: jQuery
    • oldHeader: jQuery

• activate( event, ui )

  Triggered after the accordion panel has be activated (after animation completes).

  • event: Event
  • ui: Object, Extra event data for the ui accordion activate event
    • newContent: jQuery, Refers to the activated content panel
    • newHeader: jQuery
    • oldContent: jQuery
    • oldHeader: jQuery

Example: Initialize an accordion with default options.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Initialize an accordion with default options.</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
</head>
<body>
  <div id="accordion">
		<h3><a href="#">Section 1</a></h3>
		<div>
			<p>
			Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
			</p>
		</div>
		<h3><a href="#">Section 2</a></h3>
		<div>
			<p>
			Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
			purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
			</p>
		</div>
		<h3><a href="#">Section 3</a></h3>
		<div>
			<p>
			Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
			Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
			</p>
			<ul>
				<li>List item one</li>
				<li>List item two</li>
				<li>List item three</li>
			</ul>
		</div>
	</div>
<script>
		$("#accordion").accordion();
	</script>
</body>
</html>

Demo:

Example: Initialize an accordion with default options.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Initialize an accordion with default options.</title>
  <link rel="stylesheet" href="jquery-ui.css">
  <style>
		.accordion-container {
			padding: 10px;
			width: 350px;
			height: 220px;
		}
	  </style>
  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
</head>
<body>
  <div class="accordion-container">
		<div id="accordion">
			<h3><a href="#">Section 1</a></h3>
			<div>
				<p>
				Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
				</p>
			</div>
			<h3><a href="#">Section 2</a></h3>
			<div>
				<p>
				Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
				purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
				</p>
			</div>
			<h3><a href="#">Section 3</a></h3>
			<div>
				<p>
				Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
				Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
				</p>
				<ul>
					<li>List item one</li>
					<li>List item two</li>
					<li>List item three</li>
				</ul>
			</div>
		</div>
	</div>
<script>
		$( "#accordion" ).accordion({
			heightStyle: "fill"
		});
	</script>
</body>
</html>

Demo: