jQuery UI - Accordion Demos & Documentation

http://jqueryui.com/demos/accordion/

jQuery

Plugins

UI

Blog

About

Donate

Download

Demos & Documentation

Themes

Development

Support

Interactions
Draggable Droppable Resizable Selectable Sortable

Accordion
New window Section 1 Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 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. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Theme: UI lightness

Examples
Default functionality Fill space No auto height Collapse content Open on mouseover Open on hoverintent Customize icons

Widgets
Accordion Autocomplete Button Datepicker Dialog Progressbar Slider Tabs

Section 2 Section 3 Section 4

Sortable

Effects
Color Animation Toggle Class Add Class Remove Class Switch Class Effect Toggle Hide Show View Source Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover. The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

Overview

Options

Events

Methods

Theming
Show details | Hide examples

Utilities
Position Widget

create change

Type: accordioncreate Type: accordionchange

About jQuery UI
Getting Started Upgrade Guide Changelog Roadmap Subversion Access UI Developer Guidelines

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. $('.ui-accordion').bind('accordionchange', function(event, ui) { ui.newHeader // jQuery object, activated header ui.oldHeader // jQuery object, previous header ui.newContent // jQuery object, activated content ui.oldContent // jQuery object, previous content }); Code examples Supply a callback function to handle the change event as an init option. $( ".selector" ).accordion({ change: function(event, ui) { ... } }); Bind to the change event by type: accordionchange. $( ".selector" ).bind( "accordionchange", function(event, ui) { ... });

Theming
Theming jQuery UI jQuery UI CSS Framework ThemeRoller application Theme Switcher Widget

1 of 2

3/27/2012 9:25 PM

jQuery UI - Accordion Demos & Documentation

http://jqueryui.com/demos/accordion/

changestart

Type: accordionchangestart

SPONSORED BY:

2010 THE JQUERY PROJECT AND THE JQUERY UI TEAM.

2 of 2

3/27/2012 9:25 PM