Accordion

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

Theming

The accordion widget uses the jQuery UI CSS framework to style its look and feel. If accordion specific styling is needed, the following CSS class names can be used:

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

// Getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// Setter
$( ".selector" ).accordion( "option", "active", 2 );

$( ".selector" ).accordion({
  animate: 200
});

// Getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// Setter
$( ".selector" ).accordion( "option", "animate", 200 );

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

// Getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// Setter
$( ".selector" ).accordion( "option", "collapsible", true );

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

// Getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// Setter
$( ".selector" ).accordion( "option", "disabled", true );

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

// Getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// Setter
$( ".selector" ).accordion( "option", "event", "mouseover" );

Selector for the header element, applied via .find() on the main accordion element. Content panels must be the sibling immediately after their associated headers.

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

// Getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// Setter
$( ".selector" ).accordion( "option", "header", "h3" );

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 be only as tall as its content.

$( ".selector" ).accordion({
  heightStyle: "fill"
});

// Getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// Setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );

Icons to use for headers, matching an icon provided by the jQuery UI CSS Framework. Set to false to have no icons displayed.

• header (string, default: "ui-icon-triangle-1-e")
• activeHeader (string, default: "ui-icon-triangle-1-s")

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

// Getter
var icons = $( ".selector" ).accordion( "option", "icons" );
 
// Setter
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );

Invoke the destroy method:

$( ".selector" ).accordion( "destroy" );

Invoke the disable method:

$( ".selector" ).accordion( "disable" );

Invoke the enable method:

$( ".selector" ).accordion( "enable" );

Retrieves the accordion's instance object. If the element does not have an associated instance, undefined is returned.

Unlike other widget methods, instance() is safe to call on any element after the accordion plugin has loaded.

Invoke the instance method:

$( ".selector" ).accordion( "instance" );

Gets the value currently associated with the specified optionName.

Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.

Invoke the method:

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );

Invoke the method:

var options = $( ".selector" ).accordion( "option" );

Sets the value of the accordion option associated with the specified optionName.

Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.

Invoke the method:

$( ".selector" ).accordion( "option", "disabled", true );

Invoke the method:

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

Invoke the refresh method:

$( ".selector" ).accordion( "refresh" );

Invoke the widget method:

var widget = $( ".selector" ).accordion( "widget" );

Triggered after a panel has been activated (after animation completes). If the accordion was previously collapsed, ui.oldHeader and ui.oldPanel will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.

Initialize the accordion with the activate callback specified:

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

Bind an event listener to the accordionactivate event:

$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );

Initialize the accordion with the beforeActivate callback specified:

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

Bind an event listener to the accordionbeforeactivate event:

$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );

Initialize the accordion with the create callback specified:

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

Bind an event listener to the accordioncreate event:

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
    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.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Phasellus eu ligula. Vestibulum sit amet purus.
    Vivamus hendrerit, dolor aliquet laoreet, mauris turpis velit,
    faucibus interdum tellus libero ac justo.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus.
    Quisque lobortis.Phasellus pellentesque purus in massa.</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>