Using jQuery UI to create an Accordion

The accordion is an expandable collapsable container layout that takes less space within the page. It is divided into multiple sections or parts and each has contents.

In this tutorial, I show how you can add accordion using jQuery UI in your page.

Download

Include Library
HTML – Create Accordion layout
jQuery – Initialize Accordion
Adding more options
Conclusion

1. Include Library

Download jQuery UI from their Official website
Include plugin CSS and script with jQuery

<!-- CSS -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<!-- Script-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. HTML- Create Accordion layout

Steps –

Create a main <div id='accordion'> container which holds other divs. You can change the id within your project.
Within <div id='accordion'> create 4 or more divs and add group class to them.
This <div class='group'> is the section container of your Accordion, it contains a <h2> and a <div>. You can use any other tags in place of <h2>.
Enter the name of your section in <h2> tag and put content in <div>.

Completed Code

<div id="accordion">
 <div class="group">
  <h2>What is AngularJS ?</h2>
 <div>
  <p>AngularJS is a JavaScript MVC framework developed by Google that lets you build well structured, easily testable, declarative and maintainable front-end applications which provides solutions to standard infrastructure concerns.</p>
 </div>
 </div>
 
 <div class="group">
  <h2>Module</h2>
  <div>
   <p>A module is a container for different parts of your application. Or
    You may think modules as a main() function in C programming, which bind together different parts of the application as same as Modules specific how Angular application should Bootstrap. </p>
  </div>
 </div>

 <div class="group">
  <h2>ng-include</h2>
  <div>
   <p>AngularJS allow us to embed HTML page within another HTML page using ng-include directive.</p>
 
  </div>
 </div>

 <div class="group">
  <h2>ng-show and ng-hide directive</h2>
  <div>
  <p>If you are from the jQuery background for hiding and showing element you generally use show() and hide() function or may be used css() function when an event occurs.

   AngularJS provide directives for it also i.e, ng-hide and ng-show.</p>
  </div>
 </div>
</div>

3. jQuery – Initialize Accordion

On ready state call, the accordion() method on id='accordion' within this method initialize the header option. Here, you can change h2 with your specified tag for the section title in <div class='group'>.

Completed Code

$(document).ready(function() {
 $( "#accordion" )
 .accordion({
   header: "> div > h2"
 });
});

View Demo

4. Adding more options

Here, are some options, methods, and events.

Options –

Syntax –

# For getting the option value

$( selector ).accordion( "option", option-name );

# For setting the option value

You can either use this method

$( selector ).accordion( "option", option-name, value );

$(selector).accordion({
 option: value
});

Some of the options are –

active

Pass active option in accordion method with section position number. The default value is 0.

Example –

$( "#accordion" )
 .accordion({
   header: "> div > h2",
   active:2
 });

For getting the selected active section

var active = $( "#accordion" ).accordion( "option", "active" );

disabled

Use it to disable working of accordion, its default value is false. Pass true for disabling the accordion.

Example –

$('#accordion').accordion({
     header: "> div > h2",
     active:0,
     disabled: true
});

event

Set at which event accordion get activated. The default value of an event is click.

Example –

$('#accordion').accordion({
 header: "> div > h2",
 event: 'mousehover'
 });

Now accordion gets activated(Expand or collapse) on mouseover event instead of click.

View Demo

Methods –

Some of the methods are –

destroy

It removes complete accordion functionality and design. It doesn’t take any arguments.

Example –

$('#remove').click(function(){
    $('#accordion').accordion( "destroy" );
});

disable

Disable the accordion and it doesn’t take any arguments.

Example –

$('#disable').click(function(){
    $( "#accordion" ).accordion( "disable" );
});

enable

For enabling the disabled accordion you can use this and It also doesn’t take any arguments.

Example –

$('#enable').click(function(){
    $( "#accordion" ).accordion( "enable" );
});

View Demo

Events –

activate

It triggers when the section activated.

Example –

$( "#accordion" )
.accordion({
    header: "> div > h2",
    activate: function( event, ui ) {
         alert(ui.newHeader.text());
    }
});

beforeActivate

It triggers before section being activated.

Example –

$( "#accordion" )
 .accordion({
    header: "> div > h2",
    beforeActivate: function( event, ui ) { 
        alert(ui.newHeader.text()); 
    }
 });

5. Conclusion

The Accordion is very helpful if your page contains more content, you can use it to divide them into various sections and it occupies less space and is easy to use.

You can learn more about it from here.

View this tutorial to know accordion creation without the plugin.

If you found this tutorial helpful then don't forget to share.

Contents

1. Include Library

2. HTML- Create Accordion layout

3. jQuery – Initialize Accordion

4. Adding more options

5. Conclusion