Using jQuery UI to create an Accordion

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

How it’s Work?

The user only able to view one section at a time for seeing other sections content he/she need to expand that section. When a section header gets clicked then it expands and show its content and collapsed previously opened section.

When its require?
When you page contains many forms or contents here, you can use it to divide them into various sections the effect of this is that now its look more user-friendly and easy to navigate.

Using jQuery UI to create an Accordion


Contents

  1. Set up
  2. HTML
  3. jQuery
  4. Adding more options
  5. Conclusion

 

1. Set up

  • 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.11.4/themes/smoothness/jquery-ui.css">

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

 

2. HTML

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 number of divs and add group class to them.
  • This <div class='group'> is the section container of your Accordion, it contain a <h2> and a <div>. You can use any other tags in place of <h2>.
  • Enter 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

On ready state call, the accordion() method on id='accordion' within this method initialize 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"
 });
});

Output


 

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 );

Or

$(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.

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" );
});

Events

  • activate

It trigger when 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 in various section and it occupies less space and easy to use.

For learning more about it from here.

If you want to now to build it without using any plugin you can check Accordion using HTML, CSS, and jQuery tutorial.

Related Post

Spread the love

2 Comments

  1. Gwenyn said:

    Thank you, Yogesh! I am only starting using jQuery, so I often get confused when using the API. You explained it step by step, which made it very easy to understand every part. I have now successfully added the accordion to a site I am building.

    July 25, 2017
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *