The jQueryUI provides collapsible widget called accordion is a view of hierarchy so that only the roots of each branch are visible. It is widely used to manage large content and navigation lists on the website. We can easily create collapsing division within a webpage which is used to build accordion navigation, content boxes etc. It is jQueryUI based collapsible content panels, displays the information in a limited amount of space which is broken into logical sections and looks like tabs.
The accordion widget contains series of containers, all of which are closed except for one. Each container includes heading which opens the container and display the content. When we click on the heading, its content is displayed. When we click on the other heading, the current content will hide and new content will be shown.
also read:
The accordion method can be used in the following forms:
- $(selector, context). accordion (options)
- $(selector, context). accordion(“actions”, [params])
The following example demonstrates simple accordion technique:
<!DOCTYPE html> <head> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function(){ $("#myaccordion").accordion(); }); </script> <title>JQueryUI Example</title> </head> <body> <h2>Simple Accordion Example</h2> <div id="myaccordion"> <h2>Heading One</h2> <div> HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. </div> <h2>Heading Two</h2> <div> JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. </div> <h2>Heading Three</h2> <div> CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files. </div> </div> </body> </html>
- The above script uses accordion widget which is collapsible content holder and broken into sections, much like tabs.
- The accordion method uses ID selector “#myaccordion”, defines different content sections which will be activated and displays the content when user clicks on the particular section.
Run JQueryUI Simple Accordion Demo
Accordion Widget Options
The accordion method contains following options:
Option | Description | Default Value |
---|---|---|
active | It specifies currently opened content tab. | 0 |
animate | It indicates how to animate the panels. | { } |
collapsible | It allows to collapse the panel by clicking on it when it is set to true. | false |
disabled | It disables the accordion when it is set to true i.e. it stops collapsable operation. | false |
event | It selects an accordion header to activate the particular panel. | click |
header | It specifies the header element for the accordion element. | > li > :first-child,> :not(li):even |
heightStyle | It specifies height of the accordion and panel. | auto |
icons | It specifies the icons for the headers. | { “header”: “ui-icon-triangle-l-e”, “activeHeader”: “ui-icon-triangle-l-s”} |
The following example demonstrates usage of header, collapsible and active options:
<!DOCTYPE html> <head> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function(){ $("#myaccordion").accordion({ header: 'h2', collapsible: true, active: false, }); }); </script> <title>JQueryUI Example</title> </head> <body> <h2>Simple Accordion Example</h2> <div id="myaccordion"> <h2>Heading One</h2> <div> HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. </div> <h2>Heading Two</h2> <div> JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. </div> <h2>Heading Three</h2> <div> CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files. </div> </div> </body> </html>
- The script makes use of accordion options i.e. header, collapsible and active and accordion widget uses ID selector “#myaccordion”, to perform actions of above specified options.
- The header option specifies selector for header element to override the default pattern. In the script, the widget referring to header “h2” for identifying the header elements.
- The collapsible option allows collapsing the active section by clicking on it when it is set to true.
- The active option indicates the index of the menu when the panel is currently open.
Run JQueryUI Accordion Options Demo
The following example demonstrates usage of heightStyle and event options:
<!DOCTYPE html> <head> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function(){ $("#myaccordion").accordion({ heightStyle: "content", event: "mouseover" }); }); </script> <title>JQueryUI Example</title> </head> <body> <h2>Simple Accordion Example</h2> <div id="myaccordion"> <h2>Heading One</h2> <div> HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages. HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. </div> <h2>Heading Two</h2> <div> JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript. The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents). It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. </div> <h2>Heading Three</h2> <div> CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. Styles define how to display HTML elements. External Style Sheets can save a lot of work. External Style Sheets are stored in CSS files. </div> </div> </body> </html>
- The above program contains accordion widget options such as heightStyle and event.
- The heightStyle option controls the height of the accordion and each panel. Here, we have set value of the heightStyle to content, where each panel will be as tall as its content.
- The event option specifies the event used to select an accordion header. When we mouse over on the particular element, it will show the contents, present in it.
Run JQueryUI Accordion Options Demo1
Accordion Widget Methods
The following table shows some of the methods which are used with accordion widget:
Method | Description |
---|---|
destroy() | It removes the accordion functionality completely. |
disable() | This method disables the collapsible operation i.e. it disables the all content panels. |
enable() | This method enables the accordion operation i.e. it reactivates the all menus. |
options() | It returns the options property. It sets accordion operation with specified option name. |
refresh | It adds or removes the headers and panels in the DOM and it does not accept any arguments. |
widget() | It defines the accordion widget element with jQuery object. |
The following example demonstrates usage of enable and disable methods:
<!DOCTYPE html> <head> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> #enable, #disable{ color: red; border: 1px solid green; } </style> <script type="text/javascript"> $(function() { $("#myAccordion").accordion(); $("#enable").click(function() { $("#myAccordion").accordion("enable"); }); $("#disable").click(function() { $("#myAccordion").accordion("disable"); }); }); </script> <title>JQueryUI Example</title> </head> <body> <h2>Using Accordion Methods</h2> <div id="myAccordion"> <h2>Heading One</h2> <div> HTML stands for Hyper Text Markup Language. A markup language is a set of markup tags.HTML documents contain HTML tags and plain text HTML documents are also called web pages.HTML elements form the building blocks of all websites. HTML allows images and objects to be embedded and can be used to create interactive forms.It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. </div> <h2>Heading Two</h2> <div> JavaScript is the programming language of the Web. JavaScript is the most popular programming language in the world. All modern HTML pages are using JavaScript.The HTML DOM (the Document Object Model) is the official W3C standard for accessing HTML elements. JavaScript can manipulate the DOM (change HTML contents).It is the language for HTML, for the Web, for computers, servers, laptops, tablets, smart phones, and more. </div> <h2>Heading Three</h2> <div> CSS stands for Cascading Style Sheets. Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.Styles define how to display HTML elements. External Style Sheets can save a lot of work.External Style Sheets are stored in CSS files. </div> </div><br> <button id="enable">Enable the Accordion!</button> <button id="disable">Disable the Accordion!</button> </body> </html>
- The program uses the accordion methods called, enable() and disable().
- The enable method enables the accordion element i.e. it reactivate all the menus.
- We add click handler for the enable button by using the line “$(“#enable”).click(function())” and enable the accordion by using the line “$(“#myAccordion”).accordion(“enable”);”.
- Like enable, we add click handler for the disable button by using the line “$(“#disable”).click(function())” and disable the accordion by using the line “$(“#myAccordion”).accordion(“disable”);” .
- Turn the specified element into an accordion by using the ID selector “#myAccordion” within the accordion method as shown in the script.
Run JQueryUI Accordion Methods Demo
Accordion Widget Events
The following table shows events which are used with accordion widget:
Event | Description |
---|---|
activate(event, ui) | This event fires when the accordion operation starts and triggers after the activation of a panel. |
create(event, ui) | It fires when an accordion is created. |
beforeActivate(event, ui) | This event fires before the activation of a panel. |
The following example shows usage of activate and beforeActivate events:
<!doctype html> <head> <title>Example of Accordion</title> <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <script> $(function () { $("#myAccordion").accordion({ collapsible: true, active: true, activate: function (event, ui) { alert("activate"); }, beforeActivate: function (event, ui) { alert("before activate"); } }); }); </script> <body> <h2>Using Accordion Events</h2> <ul> <div id="myAccordion"> <li> <h2>First Heading</h3> <div> <ul> <li>A</li> <li>B</li> </ul> </div> </li> <li> <h2>Second Heading</h2> <div> <ul> <li>C</li> <li>D</li> </ul> </div> </li> </div> </ul> </body> </html>
- The script uses accordion events such as activate and beforeActivate events.
- The activate event triggers when a menu is activated. It fires after animation completes. It is not fired for the initial panel when the accordion widget is created. When a panel activates, it displays the message through alert box as specified in the script.
- The beforeActivate event fires before a panel is activated. It will display the message through alert box saying “before activate”, when we click the panel at the initial stage.
- Turn the specified element into an accordion by using the ID selector “#myAccordion” within the accordion method as shown in the script.
Run JQueryUI Accordion Events Demo