Categories

.accordion()

Categories: UI

.accordion( [ options ] )

Plugin: jQuery.ui.accordion

Description: Apply the Accordion widget for each element in the set of matched elements

  • .accordion( [ options ] )

    version added: 1.0

    options   A map of additional options pass to the widget.

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.

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

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

    Default: false

  • active

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

    Default: first child

  • animated

    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).

    Default: 'slide'

  • autoHeight

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

    Default: true

  • clearStyle

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

    Default: false

  • collapsible

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

    Default: false

  • event

    The event on which to trigger the accordion.

    Default: 'click'

  • fillSpace

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

    Default: false

  • header

    Selector for the header element.

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

  • icons

    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

    Default: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }

  • navigation

    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.

    Default: false

  • navigationFilter

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

  • create

    This event is triggered when accordion is created.

  • change

    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.

  • changestart

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

  • destroy

    • .accordion( "destroy" )

      version added: 1.0

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

  • disable

    • .accordion( "disable" )

      version added: 1.0

    Disable the accordion.

  • enable

    • .accordion( "enable" )

      version added: 1.0

    Enable the accordion.

  • option

    • .accordion( "option" , optionName , [value] )

      version added: 1.0

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

  • option

    • .accordion( "option" , options )

      version added: 1.0

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

  • widget

    • .accordion( "widget" )

      version added: 1.0

    Returns the .ui-accordion element.

  • activate

    • .accordion( "activate" , index )

      version added: 1.0

    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

    • .accordion( "resize" )

      version added: 1.0

    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.