Accordion Widget

Categories: Widgets

Accordion Widgetversion added: 1.0

Description: Convert a pair of headers and content panels into an accordion.

QuickNavExamples

Options

Methods

Events

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

1
2
3
4
5
6
 
<div id="accordion">
  <h3><a href="#">First header</a></h3>
  <div>First content panel</div>
  <h3><a href="#">Second header</a></h3>
  <div>Second content panel</div>
</div>

Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures.

The panels can be activated programmatically by setting the active option.

Additional Notes:

  • This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.

Options

active 

Type: Boolean or Integer
Default: 0
Which panel is currently open.
Multiple types supported:
  • Boolean: Setting active to false will collapse all panels. This requires the collapsible option to be true.
  • Integer: The zero-based index of the panel that is active (open).

animated 

Type: Boolean or String
Default: slide
If and how to animate changing panels.
Multiple types supported:
  • Boolean: A value of false will disable animations.
  • String: Name of easing to use with default duration. Additionally, values of "slide" and "bounceslide" have built-in custom implementations.

autoHeight 

Type: Boolean
Default: true
Whether all panels should be set to the height of the tallest panel.

clearStyle 

Type: Boolean
Default: false
Whether to clear height and overflow styles after finishing animations. This enabled accordions to work with dynamic content. Requires the autoHeight option to be false.

collapsible 

Type: Boolean
Default: false
Whether all the sections can be closed at once. Allows collapsing the active section.

disabled 

Type: Boolean
Default: false
Disables the accordion if set to true.

event 

Type: String
Default: "click"
The event that accordion headers will react to in order to activate the associated panel. Multiple events can be specificed, separated by a space.

fillSpace 

Type: String
Default: false
Whether the accordion should expand to the available height based on the accordion's parent height. This option will override the autoHeight option.

header 

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

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

icons 

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

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

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

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 the navigationFilter option to implement your own matcher.

navigationFilter 

Type: Function()
Default: function matching location.href
A function that is invoked for each tab anchor, with the anchor element as the context. Must return true for the tab that should be active on initialization.

Methods

activate( index )Returns: jQuery (plugin only)

Activate a panel.
  • index
    Type: Integer
    The zero-based index of the panel to activate.
Code examples:

Invoke the activate method:

1
 
$( ".selector" ).accordion( "activate" );

destroy()Returns: jQuery (plugin only)

Removes the accordion functionality completely. This will return the element back to its pre-init state.
  • This method does not accept any arguments.
Code examples:

Invoke the destroy method:

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

disable()Returns: jQuery (plugin only)

Disables the accordion.
  • This method does not accept any arguments.
Code examples:

Invoke the disable method:

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

enable()Returns: jQuery (plugin only)

Enables the accordion.
  • This method does not accept any arguments.
Code examples:

Invoke the enable method:

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

option( optionName )Returns: Object

Gets the value currently associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to get.
Code examples:

Invoke the method:

1
 
$( ".selector" ).accordion( "option" );

option()Returns: PlainObject

Gets an object containing key/value pairs representing the current accordion options hash.
  • This signature does not accept any arguments.
Code examples:

Invoke the method:

1
 
$( ".selector" ).accordion( "option" );

option( optionName, value )Returns: jQuery (plugin only)

Sets the value of the accordion option associated with the specified optionName.
  • optionName
    Type: String
    The name of the option to set.
  • value
    Type: Object
    A value to set for the option.
Code examples:

Invoke the method:

1
 
$( ".selector" ).accordion( "option" );

option( options )Returns: jQuery (plugin only)

Sets one or more options for the accordion.
  • options
    Type: Object
    A map of option-value pairs to set.
Code examples:

Invoke the method:

1
 
$( ".selector" ).accordion( "option" );

resize()Returns: jQuery (plugin only)

Recompute the height of the accordion panels. Results depend on the content and height-related options.
  • This method does not accept any arguments.
Code examples:

Invoke the resize method:

1
 
$( ".selector" ).accordion( "resize" );

widget()Returns: jQuery

Returns a jQuery object containing the accordion.
  • This method does not accept any arguments.
Code examples:

Invoke the widget method:

1
 
$( ".selector" ).accordion( "widget" );

Events

change( event, ui )Type: accordionchange

Triggered after a panel has been activated (after animation completes). If the accordion was previously collapsed, ui.oldHeader and ui.oldContent will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newContent will be empty jQuery objects.
  • event
    Type: Event
  • ui
    Type: Object
    • newHeader
      Type: jQuery
      The header that was just activated.
    • oldHeader
      Type: jQuery
      The header that was just deactivated.
    • newContent
      Type: jQuery
      The panel that was just activated.
    • oldContent
      Type: jQuery
      The panel that was just deactivated.
Code examples:

Initialize the accordion with the change callback specified:

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

Bind an event listener to the accordionchange event:

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

changestart( event, ui )Type: accordionchangestart

Triggered directly after a panel is activated. If the accordion is currently collapsed, ui.oldHeader and ui.oldContent will be empty jQuery objects. If the accordion is collapsing, ui.newHeader and ui.newContent will be empty jQuery objects.
  • event
    Type: Event
  • ui
    Type: Object
    • newHeader
      Type: jQuery
      The header that is about to be activated.
    • oldHeader
      Type: jQuery
      The header that is about to be deactivated.
    • newContent
      Type: jQuery
      The panel that is about to be activated.
    • oldContent
      Type: jQuery
      The panel that is about to be deactivated.
Code examples:

Initialize the accordion with the changestart callback specified:

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

Bind an event listener to the accordionchangestart event:

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

create( event, ui )Type: accordioncreate

Triggered when the accordion is created.

Note: The ui object is empty but included for consistency with other events.

Code examples:

Initialize the accordion with the create callback specified:

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

Bind an event listener to the accordioncreate event:

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

Example:

A simple jQuery UI Accordion

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>accordion demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.8.24/themes/base/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.8.2.js"></script>
  <script src="//code.jquery.com/ui/1.8.24/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.
    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><a href="#">Section 2</a></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><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.</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: