jQuery UI Demo - Accordion

This demo shows several Accordions that have custom icons instead of the jQuery UI default icons.

The custom icons used in this demo are thanks to Mark James, www.famfamfam.com and DryIcons.

Accordion #1 - Standard, Icons

Standard accordion with panels that open onClick.

Accordion

Accordion

Default Accordion

Accordion

Accordion with Icons

Accordion

An Accordion doesn't allow more than one content panel to be open at the same time. If you are looking for a widget that allows more than one content panel to be open, don't use an Accordion.

The markup uses a series of headers (H3 tags) and divs so the content is still usable even if the browser has JavaScript disabled.

If you want Accordion sections to be collapsible, add "collapsible: true" to the JavaScript code.

To set the Accordion so that the accordion sections open and close on mouseover, add event: "mouseover" to the JavaScript code.

Learn More

Tabs

Tabs

Default Tabs

Tabs

Tabs Below Content

Tabs

Content via Ajax

Tabs

Tabs break content into multiple sections that can be swapped to save space. The widget swaps the tabbed sections onClick by default, but can be changed to onHover instead.

If you want the Tabs sections to open on mouseover, add event: "mouseover" to the JavaScript code.

If you want the Tabs content to be collapsible, add collapsible: "true" to the JavaScript code.

Other options for the tabs widget include content loaded via Ajax, collapse content, sortable, tabs below content, simple manipulation and cookie persistance.

Learn More

Datepicker

Datepicker
Displayed Inline

Datepicker
Icon Trigger

Datepicker
With Button Bar

Datepicker
Month & Year Menus

Datepicker

Datepicker is tied to form field input. A user can choose a date for the form field from an interactive calendar displayed in a small overlay using this function.

To display the Datepicker embedded inline on a web page, call the .datepicker() on a div instead of a form field.

You can set the Datepicker to be displayed when clicking an icon. You can also set the Datepicker to display multiple months.

The Datepicker function has a variety of settings including animations, month and year menus, dates in other months, display button bar, localize calendar and more.

Learn More

Dialog

Dialog

Basic Modal Dialog

Dialog

Modal Message

Dialog

A Dialog is a floating window displayed in an overlay that covers the entire web page content. It contains a title bar, small to medium sized content area and can be closed with an "x" icon.

A scrollbar will automatically appear if the content length exceeds the maximum height.

The jQuery UI Dialog can be animated by specifying the desired effect in the JavaScript code. You must include the individual effects file for any effects you would like to use.

You can set the dialog so that it creates a modal message or a modal confirmation that a user must click on before continuing with the application.

Learn More

Accordion #2 - Collapsible, Icons

By default, accordions always keep one section open. This accordion has been set so that the collapsible option is true. The panels will open and close onClick.

Accordion

Accordion

Default Accordion

Accordion

Accordion with Icons

Accordion

An Accordion doesn't allow more than one content panel to be open at the same time. If you are looking for a widget that allows more than one content panel to be open, don't use an Accordion.

The markup uses a series of headers (H3 tags) and divs so the content is still usable even if the browser has JavaScript disabled.

If you want Accordion sections to be collapsible, add "collapsible: true" to the JavaScript code.

To set the Accordion so that the accordion sections open and close on mouseover, add event: "mouseover" to the JavaScript code.

Learn More

Tabs

Tabs

Default Tabs

Tabs

Tabs Below Content

Tabs

Content via Ajax

Tabs

Tabs break content into multiple sections that can be swapped to save space. The widget swaps the tabbed sections onClick by default, but can be changed to onHover instead.

If you want the Tabs sections to open on mouseover, add event: "mouseover" to the JavaScript code.

If you want the Tabs content to be collapsible, add collapsible: "true" to the JavaScript code.

Other options for the tabs widget include content loaded via Ajax, collapse content, sortable, tabs below content, simple manipulation and cookie persistance.

Learn More

Datepicker

Datepicker
Displayed Inline

Datepicker
Icon Trigger

Datepicker
With Button Bar

Datepicker
Month & Year Menus

Datepicker

Datepicker is tied to form field input. A user can choose a date for the form field from an interactive calendar displayed in a small overlay using this function.

To display the Datepicker embedded inline on a web page, call the .datepicker() on a div instead of a form field.

You can set the Datepicker to be displayed when clicking an icon. You can also set the Datepicker to display multiple months.

The Datepicker function has a variety of settings including animations, month and year menus, dates in other months, display button bar, localize calendar and more.

Learn More

Dialog

Dialog

Basic Modal Dialog

Dialog

Modal Message

Dialog

A Dialog is a floating window displayed in an overlay that covers the entire web page content. It contains a title bar, small to medium sized content area and can be closed with an "x" icon.

A scrollbar will automatically appear if the content length exceeds the maximum height.

The jQuery UI Dialog can be animated by specifying the desired effect in the JavaScript code. You must include the individual effects file for any effects you would like to use.

You can set the dialog so that it creates a modal message or a modal confirmation that a user must click on before continuing with the application.

Learn More

Accordion #3 - Collapsible, onHover, Icons

This accordion has also been set so that the collapsible option is true. However, the panels for this accordion will open and close onHover.

Accordion

Accordion

Default Accordion

Accordion

Accordion with Icons

Accordion

An Accordion doesn't allow more than one content panel to be open at the same time. If you are looking for a widget that allows more than one content panel to be open, don't use an Accordion.

The markup uses a series of headers (H3 tags) and divs so the content is still usable even if the browser has JavaScript disabled.

If you want Accordion sections to be collapsible, add "collapsible: true" to the JavaScript code.

To set the Accordion so that the accordion sections open and close on mouseover, add event: "mouseover" to the JavaScript code.

Learn More

Tabs

Tabs

Default Tabs

Tabs

Tabs Below Content

Tabs

Content via Ajax

Tabs

Tabs break content into multiple sections that can be swapped to save space. The widget swaps the tabbed sections onClick by default, but can be changed to onHover instead.

If you want the Tabs sections to open on mouseover, add event: "mouseover" to the JavaScript code.

If you want the Tabs content to be collapsible, add collapsible: "true" to the JavaScript code.

Other options for the tabs widget include content loaded via Ajax, collapse content, sortable, tabs below content, simple manipulation and cookie persistance.

Learn More

Datepicker

Datepicker
Displayed Inline

Datepicker
Icon Trigger

Datepicker
With Button Bar

Datepicker
Month & Year Menus

Datepicker

Datepicker is tied to form field input. A user can choose a date for the form field from an interactive calendar displayed in a small overlay using this function.

To display the Datepicker embedded inline on a web page, call the .datepicker() on a div instead of a form field.

You can set the Datepicker to be displayed when clicking an icon. You can also set the Datepicker to display multiple months.

The Datepicker function has a variety of settings including animations, month and year menus, dates in other months, display button bar, localize calendar and more.

Learn More

Dialog

Dialog

Basic Modal Dialog

Dialog

Modal Message

Dialog

A Dialog is a floating window displayed in an overlay that covers the entire web page content. It contains a title bar, small to medium sized content area and can be closed with an "x" icon.

A scrollbar will automatically appear if the content length exceeds the maximum height.

The jQuery UI Dialog can be animated by specifying the desired effect in the JavaScript code. You must include the individual effects file for any effects you would like to use.

You can set the dialog so that it creates a modal message or a modal confirmation that a user must click on before continuing with the application.

Learn More

Accordion #4 - onClick, Icons

The panels for this accordion will open onClick (they are not set to be collapsible).

Accordion

Accordion

Default Accordion

Accordion

Accordion with Icons

Accordion

An Accordion doesn't allow more than one content panel to be open at the same time. If you are looking for a widget that allows more than one content panel to be open, don't use an Accordion.

The markup uses a series of headers (H3 tags) and divs so the content is still usable even if the browser has JavaScript disabled.

If you want Accordion sections to be collapsible, add "collapsible: true" to the JavaScript code.

To set the Accordion so that the accordion sections open and close on mouseover, add event: "mouseover" to the JavaScript code.

Learn More

Tabs

Tabs

Default Tabs

Tabs

Tabs Below Content

Tabs

Content via Ajax

Tabs

Tabs break content into multiple sections that can be swapped to save space. The widget swaps the tabbed sections onClick by default, but can be changed to onHover instead.

If you want the Tabs sections to open on mouseover, add event: "mouseover" to the JavaScript code.

If you want the Tabs content to be collapsible, add collapsible: "true" to the JavaScript code.

Other options for the tabs widget include content loaded via Ajax, collapse content, sortable, tabs below content, simple manipulation and cookie persistance.

Learn More

Datepicker

Datepicker
Displayed Inline

Datepicker
Icon Trigger

Datepicker
With Button Bar

Datepicker
Month & Year Menus

Datepicker

Datepicker is tied to form field input. A user can choose a date for the form field from an interactive calendar displayed in a small overlay using this function.

To display the Datepicker embedded inline on a web page, call the .datepicker() on a div instead of a form field.

You can set the Datepicker to be displayed when clicking an icon. You can also set the Datepicker to display multiple months.

The Datepicker function has a variety of settings including animations, month and year menus, dates in other months, display button bar, localize calendar and more.

Learn More

Dialog

Dialog

Basic Modal Dialog

Dialog

Modal Message

Dialog

A Dialog is a floating window displayed in an overlay that covers the entire web page content. It contains a title bar, small to medium sized content area and can be closed with an "x" icon.

A scrollbar will automatically appear if the content length exceeds the maximum height.

The jQuery UI Dialog can be animated by specifying the desired effect in the JavaScript code. You must include the individual effects file for any effects you would like to use.

You can set the dialog so that it creates a modal message or a modal confirmation that a user must click on before continuing with the application.

Learn More