A jQuery Accordion Plug-in with Bootstrap: 2 Demos

Create FAQs style accordion by jQuery

The jquery-accordion is a tiny plug-in for creating the FAQs style accordion in your web pages. As the main panel opens after user’s click or tap on smartphones, the panel body may contain multiple questions and their respective answers – that makes it a multi-accordion plug-in.

You may use it for some other purpose as well, depending on the content and scenario of your project. As such this is multi accordion plug-in and may work with any content with multi-level information.

Demo1 Demo2
Developer page Download plug-in

Set up the multi-accordion plug-in on your website

From the above download link, get the plug-in and extract the zipped file. Find the accordion.js file and place it on the web page where you intend to create the accordion.

Place the JS file of the plug-in below the jQuery:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>

<script type=”text/javascript” src=”js/jquery-accordion/accordion.js” ></script>

Place these files at the last of the web page (before the </body> tag).

The plug-in also has a CSS file that you may customize to change the look and feel of the multi-accordion as per the need of your website.

See the demos below for the markup and CSS.

A demo of jQuery multi-accordion plug-in

In this example, an accordion is created by using the Bootstrap framework. Three main panels are created along with four sub-panels or section in each panel. Click on the first one to open its content. For example, the first panel is “Control Panel”. Click there and expand its content. There you will see four collapsed accordions.

  • Manage Databases
  • Manage Accounts
  • Domains
  • Email Accounts

Clicking on any accordion will expand its content as shown in the graphic below or you may see it online by clicking the link or image below:

jQuery accordion

See online demo and code

An example markup for the multi-accordion that is also used in above demo:

 

See the complete markup in the demo page.

Customizing the accordion by modifying the CSS

As mentioned earlier, the plug-in comes up with a CSS file (style.css) that defines the style of the multi-accordion. You may modify the properties directly there or override the specific classes for changing the look and feel of the accordion or to match it with the rest of your web design.

In this example, I have changed the name of CSS file from style.css to style2.css and referred in the demo page as well. For the demo, I have changed a few properties. Have a look at the demo and classes below:

jQuery accordion style

See online demo and code

The following CSS classes are modified along with properties.

For changing the background color, text color, padding etc. for the main panel (in demos where control panel, Billing Questions etc. are):

 

For dealing with the content of second panel (circle in that case), access and modify the following class:

 

For managing the circle properties where 1, 2, 4 and 4 are displayed:

 

The CSS class has a few other classes. Just play around and apply your creativity.