jQuery accordion plugin with 7 examples

The accordion plugin in jQuery UI

The accordion plugin by jQuery UI is just like tabs plugin that allows collapsible information section in your web page. The accordion plugin is particularly useful if you have long information that can be divided into different sections in a web page. The accordion helps in reducing the space required that otherwise will be occupied.

Creating accordion by the jQuery plugin is merely the matter of including jQuery UI library and calling an accordion in JavaScript section where it is associated to an element like div, paragraph etc. that will act as an accordion.

In this tutorial, I will explore different options provided by jQuery UI accordion plugin as well. For different options, the examples are also given that can be seen online along with demo code.

A basic example of using jQuery accordion

In this example, I will create a basic accordion with three sections. Although you can use your own styling to match accordion to the rest of site theme. For this example, I will use the default CSS, just to show how accordion looks.

See online demo and code

First of all, you have to include jQuery library. This is followed by jQuery UI library. Though we included whole as using the CDN, you can create your own lighter weight jQuery UI JS file based on the required component.

In that case, as only accordion widget is required so you can create a customized download if you do not need any other component, here: http://jqueryui.com/download/

The main accordion is created using a div tag. You can place arbitrary tags in the header section where example uses <h3> tags. For instance, you can use the h1, h2 there or even span tag, however, ensure that each panel is next sibling after its associated header.

The script section simply calls div with accordion:

The collapsible accordion jQuery example

In the following example of jQuery UI accordion widget, I am going to create a collapsible content panel option. That means unlike in above example where one content panel has to be opened. By using collapsible option as true, you can open and close a panel by clicking on it. At the same time, all panels can be closed as well.

Just add this line in script section to the first example:

 

or see example in action by clicking the link below:

See online demo and code

The jQuery code:

The CSS for this accordion:

An accordion example with custom CSS

The default color scheme of accordion jQuery UI plugin is the grayish type. However, for your web projects you would want to match it to rest of the site’s theme. In this example, I will show you how to change the style, color, background, text in the accordion by using classes/ids inside a web page.

You can simply use jQuery-UI accordion CSS classes and override as per need to match your theme. Also, you can add style/properties as well.

The classes needed to change headers and content are:

 

Besides it also include classes related to the icon used with headers (if you want so). These are:

 

Rather including the whole CSS file, you can simply extract these classes to use the jQuery accordion widget. You can also amend these that will override the default style.

In the following example, I have created an accordion with three content panels with customized CSS. This is how it looks along with code:

See online demo and code

The CSS:

The Markup:

The jQuery

You can see accordion uses background color with border-radius for headers while content panels also use the lighter background with the border except the top border; all specified in particular CSS classes.

The accordion with animate option example

In this example, I will use the animate option in the jQuery accordion. The animate option specifies how content panel should open or close. You can define duration as well as the style of easing for animation. See following examples of using the animate option with different easing and duration.

See online demo and code

The jQuery code for this demo:

In this example, I used the animate option with easeInOutBounce easing type.

Accordion animation with easeInOutQuad value

In the following accordion example, I will use easeInOutQuad value for easing. In the example, I used <a> tag for headers with underline rather than the h3 tag.

See online demo and code

To see the complete list of available easing values go to this link: http://api.jqueryui.com/easings/

Accordion example with duration in animation

Following example uses the animate option with the duration value of 1500 milliseconds. This will make content panels opening by specified time with animation.

See online demo and code

A sortable accordion example

While using accordion in different sites, you might have seen the content panels are sortable. For example panels in a website’s dashboard that you can customize as per preferences. Next time you log in, you will see the same settings as where you left last time. Allowing users to sort content panels or re-arrange as per their liking is quite easier to do in jQuery UI accordion.

Following example shows how to create accordion by using the widget that contains three panels that you can rearrange.

See online demo and code

The code:

The accordion is kept collapsible as well.

An accordion example with icons in header

You can also customize icons in the header section of content panels in accordion jQuery UI plugin. You need to use the icon classes. Though, the default classes are provided. If you include jQuery-UI CSS file, you can also create customized CSS classes with the background image.

In the following example, I have created an accordion of jQuery UI with custom icon classes. One class is used for the active panel, which content panel is opened. The other is for closed panels with larger size icon. See example online by clicking the demo link or image below:

See online demo and code

jQuery code:

The CSS:

 The Markup:

See the live demo by clicking the above links.