# jQuery UI Accordion

## Overview

Make the selected elements Accordion widgets. Semantic requirements:

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.

[edit]

#### 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();
    });

### Dependencies

- UI Core
- UI Widget
- UI Effects Core (Optional - only for non-default animations)

### Example

- Demo
- View Source

A simple jQuery UI Accordion.

    $("#accordion").accordion();

    <!DOCTYPE html>
    <html>
    <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

      <script>
      $(document).ready(function() {
        $("#accordion").accordion();
      });
      </script>
    </head>
    <body style="font-size:62.5%;">

    <div id="accordion">
    	<h3><a href="#">Section 1</a></h3>
    	<div>
    		<p>
    		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    		</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
    		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    		suscipit faucibus urna.
    		</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
    		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    		</p>
    		<ul>
    			<li>List item one</li>
    			<li>List item two</li>
    			<li>List item three</li>
    		</ul>
    	</div>
    	<h3><a href="#">Section 4</a></h3>
    	<div>
    		<p>
    		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    		mauris vel est.
    		</p>
    		<p>
    		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    		inceptos himenaeos.
    		</p>
    	</div>
    </div>

    </body>
    </html>

## Options

- ### disabled

  Type:
    Boolean
  Default:
    false

  Disables (true) or enables (false) the accordion. Can be set when initialising (first creating) the accordion.

  #### Code examples

  Initialize a accordion with the `disabled` option specified.

        $( ".selector" ).accordion({ disabled: true });

  Get or set the `disabled` option, after init.

        //getter
        var disabled = $( ".selector" ).accordion( "option", "disabled" );
        //setter
        $( ".selector" ).accordion( "option", "disabled", true );

- ### active

  Type:
    Selector, Element, jQuery, Boolean, Number
  Default:
    first child

  Selector for the active element. Set to false to display none at start. Needs `collapsible: true`.

  #### Code examples

  Initialize a accordion with the `active` option specified.

        $( ".selector" ).accordion({ active: 2 });

  Get or set the `active` option, after init.

        //getter
        var active = $( ".selector" ).accordion( "option", "active" );
        //setter
        $( ".selector" ).accordion( "option", "active", 2 );

- ### animated

  Type:
    Boolean, String
  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).

  #### Code examples

  Initialize a accordion with the `animated` option specified.

        $( ".selector" ).accordion({ animated: 'bounceslide' });

  Get or set the `animated` option, after init.

        //getter
        var animated = $( ".selector" ).accordion( "option", "animated" );
        //setter
        $( ".selector" ).accordion( "option", "animated", 'bounceslide' );

- ### autoHeight

  Type:
    Boolean
  Default:
    true

  If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.

  #### Code examples

  Initialize a accordion with the `autoHeight` option specified.

        $( ".selector" ).accordion({ autoHeight: false });

  Get or set the `autoHeight` option, after init.

        //getter
        var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
        //setter
        $( ".selector" ).accordion( "option", "autoHeight", false );

- ### clearStyle

  Type:
    Boolean
  Default:
    false

  If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoHeight.

  #### Code examples

  Initialize a accordion with the `clearStyle` option specified.

        $( ".selector" ).accordion({ clearStyle: true });

  Get or set the `clearStyle` option, after init.

        //getter
        var clearStyle = $( ".selector" ).accordion( "option", "clearStyle" );
        //setter
        $( ".selector" ).accordion( "option", "clearStyle", true );

- ### collapsible

  Type:
    Boolean
  Default:
    false

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

  #### Code examples

  Initialize a accordion with the `collapsible` option specified.

        $( ".selector" ).accordion({ collapsible: true });

  Get or set the `collapsible` option, after init.

        //getter
        var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
        //setter
        $( ".selector" ).accordion( "option", "collapsible", true );

- ### event

  Type:
    String
  Default:
    'click'

  The event on which to trigger the accordion.

  #### Code examples

  Initialize a accordion with the `event` option specified.

        $( ".selector" ).accordion({ event: 'mouseover' });

  Get or set the `event` option, after init.

        //getter
        var event = $( ".selector" ).accordion( "option", "event" );
        //setter
        $( ".selector" ).accordion( "option", "event", 'mouseover' );

- ### fillSpace

  Type:
    Boolean
  Default:
    false

  If set, the accordion completely fills the height of the parent element. Overrides autoheight.

  #### Code examples

  Initialize a accordion with the `fillSpace` option specified.

        $( ".selector" ).accordion({ fillSpace: true });

  Get or set the `fillSpace` option, after init.

        //getter
        var fillSpace = $( ".selector" ).accordion( "option", "fillSpace" );
        //setter
        $( ".selector" ).accordion( "option", "fillSpace", true );

- ### header

  Type:
    Selector, jQuery
  Default:
    '> li > :first-child,> :not(li):even'

  Selector for the header element.

  #### Code examples

  Initialize a accordion with the `header` option specified.

        $( ".selector" ).accordion({ header: 'h3' });

  Get or set the `header` option, after init.

        //getter
        var header = $( ".selector" ).accordion( "option", "header" );
        //setter
        $( ".selector" ).accordion( "option", "header", 'h3' );

- ### icons

  Type:
    Object
  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. Set to false to have no icons displayed.

  #### Code examples

  Initialize a accordion with the `icons` option specified.

        $( ".selector" ).accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });

  Get or set the `icons` option, after init.

        //getter
        var icons = $( ".selector" ).accordion( "option", "icons" );
        //setter
        $( ".selector" ).accordion( "option", "icons", { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } );

- ### navigation

  Type:
    Boolean
  Default:
    false

  If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.

  #### Code examples

  Initialize a accordion with the `navigation` option specified.

        $( ".selector" ).accordion({ navigation: true });

  Get or set the `navigation` option, after init.

        //getter
        var navigation = $( ".selector" ).accordion( "option", "navigation" );
        //setter
        $( ".selector" ).accordion( "option", "navigation", true );

- ### navigationFilter

  Type:
    Function
  Default:

  Overwrite the default location.href-matching with your own matcher.

  #### Code examples

  Initialize a accordion with the `navigationFilter` option specified.

        $( ".selector" ).accordion({ navigationFilter: function(){ ... } });

  Get or set the `navigationFilter` option, after init.

        //getter
        var navigationFilter = $( ".selector" ).accordion( "option", "navigationFilter" );
        //setter
        $( ".selector" ).accordion( "option", "navigationFilter", function(){ ... } );

## Events

- ### create

  Type:
    accordioncreate

  This event is triggered when accordion is created.

  #### Code examples

  Supply a callback function to handle the `create` event as an init option.

        $( ".selector" ).accordion({
           create: function(event, ui) { ... }
        });

  Bind to the `create` event by type: `accordioncreate`.

        $( ".selector" ).bind( "accordioncreate", function(event, ui) {
          ...
        });

- ### change

  Type:
    accordionchange

  This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately.

      $('.ui-accordion').bind('accordionchange', function(event, ui) {
        ui.newHeader // jQuery object, activated header
        ui.oldHeader // jQuery object, previous header
        ui.newContent // jQuery object, activated content
        ui.oldContent // jQuery object, previous content
      });

  #### Code examples

  Supply a callback function to handle the `change` event as an init option.

        $( ".selector" ).accordion({
           change: function(event, ui) { ... }
        });

  Bind to the `change` event by type: `accordionchange`.

        $( ".selector" ).bind( "accordionchange", function(event, ui) {
          ...
        });

- ### changestart

  Type:
    accordionchangestart

  This event is triggered every time the accordion starts to change.

      $('.ui-accordion').bind('accordionchangestart', function(event, ui) {
        ui.newHeader // jQuery object, activated header
        ui.oldHeader // jQuery object, previous header
        ui.newContent // jQuery object, activated content
        ui.oldContent // jQuery object, previous content
      });

  #### Code examples

  Supply a callback function to handle the `changestart` event as an init option.

        $( ".selector" ).accordion({
           changestart: function(event, ui) { ... }
        });

  Bind to the `changestart` event by type: `accordionchangestart`.

        $( ".selector" ).bind( "accordionchangestart", function(event, ui) {
          ...
        });

## Methods

- ### destroy

  Signature:
    .accordion( "destroy" )

  Remove the accordion functionality completely. This will return the element back to its pre-init state.

- ### disable

  Signature:
    .accordion( "disable" )

  Disable the accordion.

- ### enable

  Signature:
    .accordion( "enable" )

  Enable the accordion.

- ### option

  Signature:
    .accordion( "option" , optionName , [value] )

  Get or set any accordion option. If no value is specified, will act as a getter.

- ### option

  Signature:
    .accordion( "option" , options )

  Set multiple accordion options at once by providing an options object.

- ### widget

  Signature:
    .accordion( "widget" )

  Returns the .ui-accordion element.

- ### activate

  Signature:
    .accordion( "activate" , index )

  Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass `false` to close all (only possible with `collapsible:true`).

- ### resize

  Signature:
    .accordion( "resize" )

  Recompute heights of the accordion contents when using the fillSpace option and the container height changed. For example, when the container is a resizable, this method should be called by its resize-event.

## Theming

The jQuery UI Accordion plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.accordion.css stylesheet that can be modified. These classes are highlighed in bold below.

### Sample markup with jQuery UI CSS Framework classes

<div class="ui-accordion ui-widget ui-helper-reset">
<h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top">
<span class="ui-icon ui-icon-triangle-1-s"/>
<a href="#">Section 1</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
Section 1 content
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-triangle-1-e"/>
<a href="#">Section 2</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
Section 2 content
</div>
<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-triangle-1-e"/>
<a href="#">Section 3</a>
</h3>
<div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
Section 3 content
</div>
</div>

Note: This is a sample of markup generated by the accordion plugin, not markup you should use to create a accordion. The only markup needed for that is
<div>
<h3><a href="#">Section 1</a></h3>
<div>
Section 1 content
</div>
<h3><a href="#">Section 2</a></h3>
<div>
Section 2 content
</div>
<h3><a href="#">Section 3</a></h3>
<div>
Section 3 content
</div>
</div>.