jQuery UI API - Accordion Widget

Category

Widgets

Usage

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

Version added:1.0

The accordion container's markup requires a pair of headers and content panels.

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

The accordion supports arbitrary markup, but each content panel must be the next sibling of its associated header. Seeheaderthe options to learn how to use a custom markup structure.

Panels can, by settingactivethe option, be activated programmatically.

Keyboard interaction

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

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

When focus is in a panel, the following keyboard commands are available:

  • CTRL+UP: Move focus to the associated header.

Theming

The Accordion Widget uses thejQuery UI CSS Frameworkto define the styling of its look and feel. If you need to use accordion-specific styles, you can use the following CSS class names:

  • ui-accordion: The outer container of the accordion.
    • ui-accordion-header: The header of the accordion. If the header containsicons, the header will also have aui-accordion-icons class。
    • ui-accordion-content: The content panel of the accordion.

Dependencies

Additional notes

  • This widget requires some functional CSS, otherwise it will not work. If you create a custom theme, use the widget-specific CSS file as a starting point.

Quick navigation

Options Methods Events

Options Type Description Default value
active Boolean or Integer Which panel is currently open.

Supports multiple types:

  • Boolean: Setactiveisfalseto collapse all panels. This requires thecollapsibleoption to betrue。
  • Integer: The zero-based index of the panel to activate. Negative values select panels going back from the last panel.

Code examples:

Initialize the accordion with the specifiedactiveoption:

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

After initialization, get or set theactiveoption:

// getter
var active = $( ".selector" ).accordion( "option", "active" );
 
// setter
$( ".selector" ).accordion( "option", "active", 2 );
    
 0
animate Boolean or Number or String or Object Whether and how to animate panel changes.

Supports multiple types:

  • Boolean：falsevalue will disable the animation.
  • Number: the default duration of the easing, in milliseconds.
  • String: for the default duration, theeasingname.
  • Object：easinganddurationAnimation settings with properties.
    • Any of the above options can containdowna property.
    • When the panel being activated has a lower index than the currently active panel, a "Down" animation occurs.

Code examples:

Initialize the accordion with the specifiedanimateoption:

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

After initialization, get or set theanimateoption:

// getter
var animate = $( ".selector" ).accordion( "option", "animate" );
 
// setter
$( ".selector" ).accordion( "option", "animate", "bounceslide" );
    
 {}
collapsible Boolean Whether all sections can be closed at once. Allows the active section to be collapsed.

Code examples:

Initialize the accordion with the specifiedcollapsibleoption:

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

After initialization, get or set thecollapsibleoption:

// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
 
// setter
$( ".selector" ).accordion( "option", "collapsible", true );
    
 false
disabled Boolean If set totrue, the accordion is disabled.

Code examples:

Initialize the accordion with the specifieddisabledoption:

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

After initialization, get or set thedisabledoption:

// getter
var disabled = $( ".selector" ).accordion( "option", "disabled" );
 
// setter
$( ".selector" ).accordion( "option", "disabled", true );
    
 false
event String The event that the accordion headers will react to in order to activate the associated panel. Multiple events can be specified, separated by spaces.

Code examples:

Initialize the accordion with the specifiedeventoption:

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

After initialization, get or set theeventoption:

// getter
var event = $( ".selector" ).accordion( "option", "event" );
 
// setter
$( ".selector" ).accordion( "option", "event", "mouseover" );
    
 "click"
header Selector Selector for the header element, applied via .find() on the main accordion element. Content panels must be sibling elements that immediately follow their associated headers.

Code examples:

Initialize the accordion with the specifiedheaderoption:

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

After initialization, get or set theheaderoption:

// getter
var header = $( ".selector" ).accordion( "option", "header" );
 
// setter
$( ".selector" ).accordion( "option", "header", "h3" );
    
 "> li > :first-child,> :not(li):even"
heightStyle String 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": Expands to the available height based on the height of the accordion's parent element.
  • "content": Each panel's height is determined by its content.

Code examples:

Initialize the accordion with the specifiedheightStyleoption:

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

After initialization, get or set theheightStyleoption:

// getter
var heightStyle = $( ".selector" ).accordion( "option", "heightStyle" );
 
// setter
$( ".selector" ).accordion( "option", "heightStyle", "fill" );
    
 "auto"
icons Object The icons to use for the headers, andthe icons (Icons) provided by the jQuery UI CSS Frameworkmatch. Set tofalsethen no icons are displayed.
  • header (string, default: "ui-icon-triangle-1-e")
  • activeHeader (string, default: "ui-icon-triangle-1-s")

Code examples:

Initialize the accordion with the specifiediconsoption:

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

After initialization, get or set theiconsoption:

// getter
var icons = $( ".selector" ).accordion( "option", "icons" );
 
// setter
$( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } );
    
 { "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }

Methods Returns Description
destroy() jQuery (plugin only) Completely remove the accordion functionality. This will return the element back to its pre-init state.
  • This method does not accept any arguments.

Code examples:

Invoke the destroy method:

$( ".selector" ).accordion( "destroy" );
    
disable() jQuery (plugin only) Disable the accordion.
  • This method does not accept any arguments.

Code examples:

Invoke the disable method:

$( ".selector" ).accordion( "disable" );
    
enable() jQuery (plugin only) Enable the accordion.
  • This method does not accept any arguments.

Code examples:

Invoke the enable method:

$( ".selector" ).accordion( "enable" );
    
option( optionName ) Object Get the value currently associated with the specifiedoptionNameoption.
  • optionName
    Type: String
    Description: The name of the option to get.

Code examples:

Invoke the method:

var isDisabled = $( ".selector" ).accordion( "option", "disabled" );
    
option() PlainObject Gets an object containing key/value pairs that represent the current accordion option hash.
  • This method does not accept any arguments.

Code examples:

Invoke the method:

var options = $( ".selector" ).accordion( "option" );
    
option( optionName, value ) jQuery (plugin only) Set the value of the accordion option associated with the specifiedoptionNameoption.
  • optionName
    Type: String
    Description: The name of the option to set.
  • value
    Type: Object
    Description: The value to set for the option.

Code example:

Call this method:

$( ".selector" ).accordion( "option", "disabled", true );
    
option( options ) jQuery (plugin only) Sets one or more options for the accordion.
  • options
    Type: Object
    Description: The option-value pairs to set.

Code example:

Call this method:

$( ".selector" ).accordion( "option", { disabled: true } );
    
refresh() jQuery (plugin only) Processes any headers and panels directly added or removed in the DOM, and recalculates the height of the accordion. The result depends on the content andheightStyle options.
  • This method does not accept any arguments.

Code example:

Call the refresh method:

$( ".selector" ).accordion( "refresh" );
    
widget() jQuery Returns an accordion-containingjQueryobject.
  • This method does not accept any arguments.

Code example:

Call the widget method:

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

Events Type Description
activate( event, ui ) accordionactivate Triggered after a panel is activated (after the animation completes). If the accordion was previously collapsed, thenui.oldHeaderandui.oldPanelwill be an empty jQuery object. If the accordion is collapsing, thenui.newHeaderandui.newPanelwill be an empty jQuery object.

Note: Since theactivateevent can only be triggered when a panel is activated, when creating the accordion widget, the initial panel will not trigger this event. If you need a hook for widget creation, use thecreateevent.

  • event
    Type: Event
  • ui
    Type: Object
    • newHeader
      Type: jQuery
      Description: The header that was just activated.
    • oldHeader
      Type: jQuery
      Description: The header that was just deactivated.
    • newPanel
      Type: jQuery
      Description: The panel that was just activated.
    • oldPanel
      Type: jQuery
      Description: The panel that was just deactivated.

Code example:

Initialize the accordion with the specified activate callback:

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

Bind an event listener to the accordionactivate event:

$( ".selector" ).on( "accordionactivate", function( event, ui ) {} );
    
beforeActivate( event, ui ) accordionbeforeactivate Triggered directly before a panel is activated. Can be canceled to prevent the panel from being activated. If the accordion is currently collapsed, thenui.oldHeaderandui.oldPanelwill be an empty jQuery object. If the accordion is collapsing, thenui.newHeaderandui.newPanelwill be an empty jQuery object.
  • event
    Type: Event
  • ui
    Type: Object
    • newHeader
      Type: jQuery
      Description: The header to be activated.
    • oldHeader
      Type: jQuery
      Description: The header to be deactivated.
    • newPanel
      Type: jQuery
      Description: The panel to be activated.
    • oldPanel
      Type: jQuery
      Description: The panel to be deactivated.

Code example:

Initialize the accordion with the specified beforeActivate callback:

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

Bind an event listener to the accordionbeforeactivate event:

$( ".selector" ).on( "accordionbeforeactivate", function( event, ui ) {} );
    
create( event, ui ) accordioncreate Triggered when the accordion is created. If the accordion is collapsed,ui.headerandui.panelwill be an empty jQuery object.
  • event
    Type: Event
  • ui
    Type: Object
    • header
      Type: jQuery
      Description: The activated header.
    • panel
      Type: jQuery
      Description: The activated panel.

Code example:

Initialize the accordion with the specified create callback:

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

Bind an event listener to the accordioncreate event:

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

Examples

A simple jQuery UI Accordion.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>折叠面板部件（Accordion Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="accordion">
  <h3>部分 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>部分 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>部分 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>

Other Extensions