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>First header</h3>
  <div>First content panel</div>
  <h3>Second header</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.

Keyboard interaction

When focus is on a header, the following key commands are available:

  • UP/LEFT: Move focus to the previous header. If on first header, moves focus to last header.
  • DOWN/RIGHT: Move focus to the next header. If on last header, moves focus to first header.
  • HOME: Move focus to the first header.
  • END: Move focus to the last header.
  • SPACE/ENTER: Activate panel associated with focused header.

When focus is in a panel:

  • CTRL + UP: Move focus to associated header.

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 for overrides or as keys for the classes option:

  • ui-accordion: The outer container of the accordion.
    • ui-accordion-header: The headers of the accordion. The active header will additionally have a ui-accordion-header-active class, the inactive headers will have a ui-accordion-header-collapsed class. The headers will also have a ui-accordion-icons class if they contain icons.
      • ui-accordion-header-icon: Icon elements within each accordion header.
    • ui-accordion-content: The content panels of the accordion. The active content panel will additionally have a ui-accordion-content-active class.

Dependencies

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). A negative value selects panels going backward from the last panel.
Code examples:

Initialize the accordion with the active option specified:

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

Get or set the active option, after initialization:

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

animate 

Type: Boolean or Number or String or Object
Default: {}
If and how to animate changing panels.
Multiple types supported:
  • Boolean: A value of false will disable animations.
  • Number: Duration in milliseconds with default easing.
  • String: Name of easing to use with default duration.
  • Object: An object containing easing and duration properties to configure animations.
    • Can also contain a down property with any of the above options.
    • "Down" animations occur when the panel being activated has a lower index than the currently active panel.
Code examples:

Initialize the accordion with the animate option specified:

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

Get or set the animate option, after initialization:

1
2
3
4
5
 
// Getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// Setter
$( ".selector" ).accordion( "option", "animate", 200 );

classes 

Type: Object
Default: 
{
  "ui-accordion-header": "ui-corner-top",
  "ui-accordion-header-collapsed": "ui-corner-all",
  "ui-accordion-content": "ui-corner-bottom"
}

Specify additional classes to add to the widget's elements. Any of classes specified in the Theming section can be used as keys to override their value. To learn more about this option, check out the learn article about the classes option.

Code examples:

Initialize the accordion with the classes option specified, changing the theming for the ui-accordion class:

1
2
3
4
5
 
$( ".selector" ).accordion({
  classes: {
    "ui-accordion": "highlight"
  }
});

Get or set a property of the classes option, after initialization, here reading and changing the theming for the ui-accordion class:

1
2
3
4
5
 
// Getter
var themeClass = $( ".selector" ).accordion( "option", "classes.ui-accordion" );
 
// Setter
$( ".selector" ).accordion( "option", "classes.ui-accordion", "highlight" );

collapsible 

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

Initialize the accordion with the collapsible option specified:

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

Get or set the collapsible option, after initialization:

1
2
3
4
5
 
// Getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// Setter
$( ".selector" ).accordion( "option", "collapsible", true );

disabled 

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

Initialize the accordion with the disabled option specified:

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

Get or set the disabled option, after initialization:

1
2
3
4
5
 
// Getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// Setter
$( ".selector" ).accordion( "option", "disabled", 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 specified, separated by a space.
Code examples:

Initialize the accordion with the event option specified:

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

Get or set the event option, after initialization:

1
2
3
4
5
 
// Getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// Setter
$( ".selector" ).accordion( "option", "event", "mouseover" );

header 

Type: Selector or Function( jQuery accordionElement )
Default: function( elem ) { return elem.find( "> li > :first-child" ).add( elem.find( "> :not(li)" ).even() ); }
Data identifying the header element. Content panels must be the sibling immediately after their associated headers.
Multiple types supported:
  • Selector: Selector for the header element, applied via .find() on the main accordion element.
  • Function: A function accepting the accordion element and returning the header element (added in 1.13).
Code examples:

Initialize the accordion with the header option specified:

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

Get or set the header option, after initialization:

1
2
3
4
5
 
// Getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// Setter
$( ".selector" ).accordion( "option", "header", "h3" );

Initialize the accordion with the header option specified as a function:

1
2
3
4
5
 
$( ".selector" ).accordion({
  header: function ( accordionElement ) {
    return accordionElement.find( "h3" );
  }
});

heightStyle 

Type: String
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 be only as tall as its content.
Code examples:

Initialize the accordion with the heightStyle option specified:

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

Get or set the heightStyle option, after initialization:

1
2
3
4
5
 
// Getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// Setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );

icons 

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

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")
Code examples:

Initialize the accordion with the icons option specified:

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

Get or set the icons option, after initialization:

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

Methods

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" );

instance()Returns: Object

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.

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

Invoke the instance method:

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

option( optionName )Returns: Object

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.

  • optionName
    Type: String
    The name of the option to get.
Code examples:

Invoke the method:

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

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
 
var options = $( ".selector" ).accordion( "option" );

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

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.

  • 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", "disabled", true );

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", { disabled: true } );

refresh()Returns: jQuery (plugin only)

Process any headers and panels that were added or removed directly in the DOM and recompute the height of the accordion panels. Results depend on the content and the heightStyle option.
  • This method does not accept any arguments.
Code examples:

Invoke the refresh method:

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

widget()Returns: jQuery

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

Invoke the widget method:

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

Events

activate( event, ui )Type: accordionactivate

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.

Note: Since the activate event is only fired on panel activation, it is not fired for the initial panel when the accordion widget is created. If you need a hook for widget creation use the create event.
  • event
    Type: Event
  • ui
    Type: Object
    • newHeader
      Type: jQuery
      The header that was just activated.
    • oldHeader
      Type: jQuery
      The header that was just deactivated.
    • newPanel
      Type: jQuery
      The panel that was just activated.
    • oldPanel
      Type: jQuery
      The panel that was just deactivated.
Code examples:

Initialize the accordion with the activate callback specified:

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

Bind an event listener to the accordionactivate event:

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

beforeActivate( event, ui )Type: accordionbeforeactivate

Triggered directly before a panel is activated. Can be canceled to prevent the panel from activating. If the accordion is currently 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.
  • 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.
    • newPanel
      Type: jQuery
      The panel that is about to be activated.
    • oldPanel
      Type: jQuery
      The panel that is about to be deactivated.
Code examples:

Initialize the accordion with the beforeActivate callback specified:

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

Bind an event listener to the accordionbeforeactivate event:

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

create( event, ui )Type: accordioncreate

Triggered when the accordion is created. If the accordion is collapsed, ui.header and ui.panel will be empty jQuery objects.
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="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/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>

Demo: