jQuery UI Accordion

jQuery UI Accordian is an expandable and collapsible content holder that is broken into sections and probably looks like tabs.

Syntax:

You can use the accordion () method in two forms:

First Method

$(selector, context).accordion (options) Method:

The accordion (options) method specifies that an HTML element and its contents should be treated and managed as accordion menus. The options parameter is an object that specifies the appearance and behavior of the menu involved.

Syntax:

You can use one or more options at a time using Javascript object. In the case of more than one options to be provided, you have to separate them using a comma as follows:

Following is a list of different options that can be used with this method:

Option	Description
active	It specifies the index of the menu that is open when the page is first accessed. By default its value is 0. It is of two types: boolean: if set to false will collapse all panels. This requires the collapsible option to be true. integer: The zero-based index of the panel that is active (open). a negative value selects panels going backward from the last panel.
animate	The animate option is used to set how to animate changing panels. By default its value is {}. this is of four types: boolean: a value of false will disable animations. number: this is a duration in milliseconds string: name of easing to use with default duration. object: animation settings with easing and duration properties.
collapsible	This option allows users to click on the open panel's header have no effect when it is set to false. It facilitates users to close a menu by clicking on it when it is set to true. By default its value is false.
disabled	If you set this option's value true then it disables the accordion. By default its value is false.
event	This option specifies the event used to select an accordion header. By default its value is click.
header	This option specifies a selector or element to override the default pattern for identifying the header elements. By default its value is > li > :first-child,> :not(li):even.
heightStyle	The heightStyle option is used to control the height of accordion and panels. By default its value is auto. Its possible values are: auto: all panels will be set to the height of the tallest panel. fill: expand to the available height based on the accordion's parent height. content: each panel will be only as tall as its content.
icons	This option is an object that defines the icons to use to the left of the header text for opened and closed panels. The icon to use for closed panels is specified as a property named header, whereas the icon to use for open panels is specified as a property named headerselected. By default its value is { "header": "ui-icon-triangle-1-e", "activeheader": "ui-icon-triangle-1-s" }.

jQuery UI Accordion() Example 1

Let's take an example of jQuery UI Accordion() method:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>
<div id="accordion">
  <h3>What is Java?</h3>
  <div>
    <p>
   Java is a simple, object oriented, concurrent and general purpose programming language. 
  Some other important features of java are robust, secure, portable, interactive and high performance. 
  Java was developed by Sun Microsystems in 1995 since then it has become very popular due to its feature
   like platform independent and robust in the case of memory management.
    </p>	
  </div>
  <h3>Why is it called platform?</h3>
  <div>
    <p>
   Because java has its own run time environment (JRE) and API so it is called platform.
    </p>
  </div>
  <h3>Where is it used?</h3>
  <div>
    <p>
    According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices 
   are mobile phones, games, robotics, application in banking sector etc.
    </p>
  </div>
  <h3>Why JavaTpoint</h3>
  <div>
    <ul>
      <li>Life Time Validity</li>
      <li>Training by Java Professionals</li>
      <li>Get an opportunity to work on real time projects</li>
       <li>Interaction with Industry Experts</li>
        <li>Small Batches to focus on each student</li>
    </ul>
  </div>
  </div>
 </body>
</html>

Test it Now

Second Method

The accordion ("action", params) method is used to perform an action on accordion elements, such as selecting/de-selecting the accordion menu. The action is specified as a string in the first argument (e.g., "disable" disables all menus).

Syntax:

Following is a list of actions that can be passed.

Action	Description
destroy	This action destroys the accordion functionality of an element completely. The elements return to their pre-init state.
disable	This action disable all menus. No click will be taken into account. This method does not accept any arguments.
enable	This action reactivate all menus. The clicks are again considered. This method does not accept any arguments.
option(optionName)	This action gets the value of currently associated accordion element with the specified optionname. This takes a string value as argument.
option	This action gets an object containing key/value pairs representing the current accordion options hash.
option(optionName, value)	This action sets the value of the accordion option associated with the specified optionName.
option(options)	This action sets one or more options for the accordion. Here options is a map of option-value pairs to set.
refresh	This action processes any headers and panels that were added or removed directly in the dom. it then re-computes the height of the accordion panels. Results depend on the content and the heightStyle option. This method does not accept any arguments.
widget	This action returns the accordion widget element; the one annotated with the UI-accordion class name.

jQuery UI Accordion() method example 2

Let's take an example to demonstrate the use of option (optionName, value) method:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Accordion Example </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.10.2.js"></script>
      <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <script>
         $(function() {
            $( "#accordion-5" ).accordion({
               disabled: false
            });
            $("input").each(function () {
               $(this).change(function () {
                  if ($(this).attr("id") == "disableaccordion") {
                     $("#accordion-5").accordion("option", "disabled", true);
                  } else {
                     $("#accordion-5").accordion("option", "disabled", false);
                  }
               });
            });
         });
      </script>
      <style>
         #accordion-5{font-size: 14px;}
      </style>
   </head>
   <body>
      <div id="accordion-5">
         <h3>What is Java?</h3>
            <div>
               <p>
                Java is a simple, object oriented, concurrent and general purpose programming language. 
                Some other important features of java are robust, secure, portable, interactive and high performance. 
                Java was developed by Sun Microsystems in 1995 since then it has become very popular due to its feature
                like platform independent and robust in the case of memory management.
               </p>
            </div>
            <h3>Why is it called Platform?</h3>
            <div>
               <p>
               Because java has its own run time environment (JRE) and API so it is called platform.  
               </p>
            </div>
            <h3>Where is it used?</h3>
            <div>
               <p>
             According to Sun Microsystems, nearly 3 billion devices run java. Some of these devices 
             are mobile phones, games, robotics, application in banking sector etc.    
               </p>
               
            </div>
          <h3>Why JavaTpoint?</h3>
              <div>
    <ul>
      <li>Life Time Validity</li>
      <li>Training by Java Professionals</li>
      <li>Get an opportunity to work on real time projects</li>
       <li>Interaction with Industry Experts</li>
        <li>Small Batches to focus on each student</li>
    </ul>
  </div>

         </div>
         <div style="margin-top:30px">
            <input type="radio" name="disable" id="disableaccordion"  
               value="disable">Disable accordion
            <input type="radio" name="disable" id="enableaccordion" checked 
               value="enable">Enable accordion
         </div>
     </body>
</html>

Test it Now

Next TopicjQuery UI Autocomplete

← prev next →