jQueryUI Accordion Plugin

Filed Under: jQuery

In this post, we will discuss about one of the interesting features that are very useful for the web developers, the accordion. Accordion is an expandable and collapsible stacked list of contents that can be used to present the information in a limited space.

jQueryUI Accordion Plugin

jQueryUI provides a plugin called accordion to display vertically stacked list of contents such as tabs or thumbnails that can be expanded to reveal the contents associate with it and you can also collapse the revealed contents.

Contents

Simple example to demonstrate the Accordion Plugin

The following example demonstrates the default functionality of jQueryUI accordion plugin. There are four sections in this example. You can collapse or expand these sections by clicking on each section headers.

accordion-default.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Accordion - Basic Demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>

</head>
<body>

<div id="accordion">

  <h3>jQuery tutorial</h3>
  <div>
    <p>
    This Tutorial covers all the basic jQuery functionality.
     We have also included advanced topics like jQuery plugins.
    </p>
    <ul>
      <li>jQuery Events</li>
      <li>jQuery Animations</li>
      <li>jQuery plugins</li>
    </ul>
  </div>
  <h3>Java Collections Framework Tutorial</h3>
  <div>
    <p>
    Java Collections are one of the core frameworks of Java language.
    We use Collections almost in every application, this tutorial will
    explain Java Collections Framework in detail. Learn about collections
    framework interfaces, classes and algorithms in detail.
    </p>
  </div>
  <h3>Java XML Tutorial</h3>
  <div>
    <p>
    XML is widely used technology to store or transport data and it’s
    platform independent. Java provides various API’s to read, write or
    manipulate XML data. This tutorial explains about DOM Parser, SAX Parser,
    JDOM Parser, StAX Parser and misc xml tasks.
    </p>
  </div>
  <h3>Java Regular Expression Tutorial</h3>
  <div>
    <p>
    A regular expression defines a pattern for a String. Regular Expressions
    can be used to search, edit or manipulate text. A tutorial covering
    java.util.regex package classes, regular expression symbols, metacharacters,
    quantifiers and capturing groups in detail with example.
    </p>
  </div>

</div>

</body>
</html>

You will see the following output in the browser. The first section reveals its contents by default. Click on any of the sections to toggle the content display.

jQueryUI accordion plugin provides different options and methods to customize this widget to improve the user experience on our websites. We will explore all the available options and methods in the coming sections.

Back To Top

jQueryUI Accordion Options

The following table briefly describes the available accordion plugin options and its usage.

Options Syntax Description
active $( “.selector” ).accordion({ active: 2 }); Denotes which panel is currently open. Supports both Integer and boolean return types.
False: collapse all the pannels, provided collapsible option is true. Default integer value is zero,the first panel.
animate $( “.selector” ).accordion({ animate: 200 }); Determines how to animate the collapsing and expanding of content panels.
collapsible $( “.selector” ).accordion({ collapsible: true }); Collapse all the active panels at once if it is set to true.
disabled $( “.selector” ).accordion({ disabled: true }); Setting to true will disable the accordion.
event $( “.selector” ).accordion({ event: “mouseover” }); Specifies the event used to expand or collapse the panels. You can specify multiple events separated by comma.
header $( “.selector” ).accordion({ header: “h2” }); Specifies the selector for header element. Default: “> li > :first-child,> :not(li):even”
heightStyle $( “.selector” ).accordion({ heightStyle: “fill” }); This option controls the height of the accordion and panels. “fill”, “auto”, and “content” are the possible values.
icons $( “.selector” ).accordion({ icons: { “header”: “ui-icon-plus”, “activeHeader”: “ui-icon-minus” } }); This option is used to specify the icons used for headers and active headers.

You can make use of these options when you use accordion plugin in your applications. Now will look into the methods available to customize the accordion plugin.

Back To Top

jQueryUI Accordion Methods

The following table briefly describes the available accordion plugin methods and its usage.

Methods Usage Description
destroy() $(“.selector”).accordion( “destroy”); This will remove the accordion function completely.
disable() $( “.selector”).accordion( “disable”); This method is used to disable the accordion.
enable() $( “.selector” ).accordion( “enable” ); Invoking this method enables the accordion.
instance() $(“.selector”).accordion( “instance”); This method is used to retrieve the instance object of the accordion.
option( optionName ) $( “.selector” ).accordion( “option”, “disabled” ); This is used to get the current value specified by the option name.
option( options ) $( “.selector” ).accordion( “option”, { disabled: true } ); This is used to set one or more options.
refresh() $( “.selector” ).accordion( “refresh” ); This method process headers and panels that are added or removed directly in the DOM and the height of the accordion panels are recomputed. The result of this process depends on the heightStyle option.
widget() $( “.selector” ).accordion( “widget” ); This method returns the jQuery object that contains the accordion.

These are the available methods in jQueryUI accordion plugin. Now will look into the events available to customize the accordion plugin.

Back To Top

jQueryUI Accordion Events

In this section we will look into the accordion plugin event methods. The following table briefly describes the accordion event methods.

Event Method Syntax Description
activate( event, ui ) $( “.selector” ).accordion({,activate: function( event, ui ) {}}); This method is fired after the activation of a panel.
beforeActivate( event, ui ) $( “.selector” ).accordion({,beforeActivate: function( event, ui ) {}}); This method is fired before the activation of the panel
create( event, ui ) $( “.selector” ).accordion({,create: function( event, ui ) {}}); This method is fired on creation of accordion.

Back To Top

jQueryUI Accordion in Action

In this section, you will see some examples of accordion plugin using some of the options.

Use of heightStyle option

The following example demonstrates the use of heightStyle option. In this example, you can see the dimensions of the accordion automatically set to the height of its parent container to fill the allocated vertical space by the container. We use the option heightStyle:”fill” to achieve this.

accordion-heightStyle.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Accordion - HeightStyle</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#accordion" ).accordion({
      heightStyle: "fill"
    });
  });
  </script>

</head>
<body>

<div id="accordion">

  <h3>jQuery tutorial</h3>
  <div>
    <p>
    This Tutorial covers all the basic jQuery functionality.
     We have also included advanced topics like jQuery plugins.
    </p>
    <ul>
      <li>jQuery Events</li>
      <li>jQuery Animations</li>
      <li>jQuery plugins</li>
    </ul>
  </div>
  <h3>Java Collections Framework Tutorial</h3>
  <div>
    <p>
    Java Collections are one of the core frameworks of Java language.
    We use Collections almost in every application, this tutorial will
    explain Java Collections Framework in detail. Learn about collections
    framework interfaces, classes and algorithms in detail.
    </p>
    <p>
    Java Collections are one of the core frameworks of Java language.
    We use Collections almost in every application, this tutorial will
    explain Java Collections Framework in detail. Learn about collections
    framework interfaces, classes and algorithms in detail.
    </p>
  </div>
  <h3>Java XML Tutorial</h3>
  <div>
    <p>
    XML is widely used technology to store or transport data and it’s
    platform independent. Java provides various API’s to read, write or
    manipulate XML data. This tutorial explains about DOM Parser, SAX Parser,
    JDOM Parser, StAX Parser and misc xml tasks.
    </p>
    <p>
    XML is widely used technology to store or transport data and it’s
    platform independent. Java provides various API’s to read, write or
    manipulate XML data. This tutorial explains about DOM Parser, SAX Parser,
    JDOM Parser, StAX Parser and misc xml tasks.
    </p>
  </div>
  <h3>Java Regular Expression Tutorial</h3>
  <div>
    <p>
    A regular expression defines a pattern for a String. Regular Expressions
    can be used to search, edit or manipulate text. A tutorial covering
    java.util.regex package classes, regular expression symbols, metacharacters,
    quantifiers and capturing groups in detail with example.
    </p>
  </div>

</div>

</body>
</html>

You can play with the following output

Use of event option

The following example demonstrates the event option usage. In this example we use mouseover event with this option.

accordion-eventOption.html


<!doctype html>
<html>
<head>
  <title>jQuery UI Accordion - Event Option</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/south-street/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-2.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

  <script>
  $(function() {
    $( "#accordion" ).accordion({
      event: "mouseover"
    });
  });
  </script>

</head>
<body>

<div id="accordion">

  <h3>jQuery tutorial</h3>
  <div>
    <p>
    This Tutorial covers all the basic jQuery functionality.
     We have also included advanced topics like jQuery plugins.
    </p>
    <ul>
      <li>jQuery Events</li>
      <li>jQuery Animations</li>
      <li>jQuery plugins</li>
    </ul>
  </div>
  <h3>Java Collections Framework Tutorial</h3>
  <div>
    <p>
    Java Collections are one of the core frameworks of Java language.
    We use Collections almost in every application, this tutorial will
    explain Java Collections Framework in detail. Learn about collections
    framework interfaces, classes and algorithms in detail.
    </p>
  </div>
  <h3>Java XML Tutorial</h3>
  <div>
    <p>
    XML is widely used technology to store or transport data and it’s
    platform independent. Java provides various API’s to read, write or
    manipulate XML data. This tutorial explains about DOM Parser, SAX Parser,
    JDOM Parser, StAX Parser and misc xml tasks.
    </p>
    <p>
    XML is widely used technology to store or transport data and it’s
    platform independent. Java provides various API’s to read, write or
    manipulate XML data. This tutorial explains about DOM Parser, SAX Parser,
    JDOM Parser, StAX Parser and misc xml tasks.
    </p>
  </div>
  <h3>Java Regular Expression Tutorial</h3>
  <div>
    <p>
    A regular expression defines a pattern for a String. Regular Expressions
    can be used to search, edit or manipulate text. A tutorial covering
    java.util.regex package classes, regular expression symbols, metacharacters,
    quantifiers and capturing groups in detail with example.
    </p>
  </div>

</div>

</body>
</html>

You can play with the output here.

That’s all for now and you will see the details of more jQuery Plugins in the coming posts.

Leave a Reply

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

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages