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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<!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.
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.
jQueryUI Accordion Methods
The following table briefly describes the available accordion plugin methods and its usage.
These are the available methods in jQueryUI accordion plugin. Now will look into the events available to customize the accordion plugin.
jQueryUI Accordion Events
In this section we will look into the accordion plugin event methods. The following table briefly describes the accordion event methods.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!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.