JqueryUI - Accordion

Accordion Widget in jQueryUI is a jQuery based expandable and collapsible content holder that is broken into sections and probably looks like tabs. jQueryUI provides accordion() method to achieve this.
The accordion() method can be used in two forms −
$(selector, context).accordion (options) Method
$(selector, context).accordion (options) Method
$(selector, context).accordion ("action", params) Method
$(selector, context).accordion ("action", params) Method
The accordion (options) method declares 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.
$(selector, context).accordion (options);

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −
$(selector, context).accordion({option1: value1, option2: value2..... });
The following table lists the different options that can be used with this method −
Indicates the index of the menu that is open when the page is first accessed. By default its value is 0, i.e the first menu.
Option - active
Indicates the index of the menu that is open when the page is first accessed. By default its value is 0, i.e the first menu.
This can be of type −
Boolean − If set to false will collapse all panels. This requires the collapsible option to be true.
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.
Integer − The zero-based index of the panel that is active (open). A negative value selects panels going backward from the last panel.
Syntax
$( ".selector" ).accordion(
   { active: 2 }
);

This option is used to set how to animate changing panels. By default its value is {}.
Option - animate
This option is used to set how to animate changing panels. By default its value is {}.
This can be of type −
Boolean −  A value of false will disable animations.
Boolean −  A value of false will disable animations.
Number − This is a duration in milliseconds 
Number − This is a duration in milliseconds 
String − Name of easing to use with default duration.
String − Name of easing to use with default duration.
Object −  Animation settings with easing and duration properties.
Object −  Animation settings with easing and duration properties.
Syntax
$( ".selector" ).accordion(
   { animate: "bounceslide" }
);

This option when set to true, it allows users to close a menu by clicking on it. By default, clicks on the open panel’s header have no effect. By default its value is false.
Option - collapsible
This option when set to true, it allows users to close a menu by clicking on it. By default, clicks on the open panel’s header have no effect. By default its value is false.
Syntax
$( ".selector" ).accordion(
   { collapsible: true }
);

This option when set to true disables the accordion. By default its value is false.
Option - disabled
This option when set to true disables the accordion. By default its value is false.
Syntax
$( ".selector" ).accordion(
   { disabled: true }
);

This option specifies the event used to select an accordion header. By default its value is click.
Option - event
This option specifies the event used to select an accordion header. By default its value is click.
Syntax
$( ".selector" ).accordion(
   { event: "mouseover" }
);

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.
Option - 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.
Syntax
$( ".selector" ).accordion(
   { header: "h3" }
);

This option is used to control the height of accordion and panels. By default its value is auto.
Option - heightStyle
This option is used to control the height of accordion and panels. By default its value is auto.
Possible values are −
auto − All panels will be set to the height of the tallest panel.
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.
fill − Expand to the available height based on the accordion's parent height.
content − Each panel will be only as tall as its content.
content − Each panel will be only as tall as its content.
Syntax
$( ".selector" ).accordion(
   { heightStyle: "fill" }
);

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" }.
Option - 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" }.
Syntax
$( ".selector" ).accordion(
   { icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } }
);

The following section will show you a few working examples of accordion widget functionality.
The following example demonstrates a simple example of accordion widget functionality, passing no parameters to the accordion() method.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-1" ).accordion();
         });
      </script>
      
      <style>
         #accordion-1{font-size: 14px;}
      </style>
   </head>

   <body>
      <div id = "accordion-1">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            </p>
         </div>
      </div>
   </body>
</html>
Let us save the above code in an HTML file accordionexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat. 
            

               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            

               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris nisi ut aliquip ex ea commodo consequat.     
            
Click headers(Tab 1,Tab 2,Tab 3) to expand/collapse content that is broken into logical sections, much like tabs.
The following example demonstrates the usage of three options collapsible in the accordion widget of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-2" ).accordion({
               collapsible: true
            });
         });
      </script>
      
      <style>
         #accordion-2{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-2">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
   </body>
</html>
Let us save the above code in an HTML file accordionexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            

               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            

               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.      
            
List item one
List item two
List item three
Here we have set collapsible to true. Click on an accordion header, this allows collapsing the active section.
The following example demonstrates the usage of three options heightStyle in the accordion widget of JqueryUI.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-3" ).accordion({
               heightStyle: "content"
            });
            $( "#accordion-4" ).accordion({
               heightStyle: "fill"
            });
         });
      </script>
      
      <style>
         #accordion-3, #accordion-4{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <h3>Height style-content</h3>
      <div style = "height:250px">
         <div id = "accordion-3">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. 
               </p>
            </div>
         </div>
      </div><br><br>
      
      <h3>Height style-Fill</h3>
      <div style = "height:250px">
         <div id = "accordion-4">
            <h3>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</li>
                  <li>List item four</li>
                  <li>List item five</li>
               </ul>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua. 
               </p>
            </div>
         </div>
      </div>
   </body>
</html>
Let us save the above code in an HTML file accordionexample.htm and open it in a standard browser which supports javascript, you must also see the following output. Now, you can play with the result −

                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               
List item one
List item two
List item three
List item four
List item five

                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua.
               

                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore 
                  magna aliqua. 
               

                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               
List item one
List item two
List item three
List item four
List item five

                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua.
               

                  Lorem ipsum dolor sit amet, consectetur adipisicing 
                  elit, sed do eiusmod tempor incididunt ut labore 
                  et dolore magna aliqua. 
               
Here we have two accordions, the first one has heightStyle option set to content, which allows the accordion panels to keep their native height. Second accordion has heightStyle option set to fill, the script will automatically set the dimensions of the accordion to the height of its parent container.
The accordion ("action", params) method can 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). Check out the actions that can be passed, in the following table.
$(selector, context).accordion ("action", params);;

The following table lists the different actions that can be used with this method −
This action destroys the accordion functionality of an element completely. The elements return to their pre-init state.
Action - destroy
This action destroys the accordion functionality of an element completely. The elements return to their pre-init state.
Syntax
$(".selector").accordion("destroy");

This action disable all menus. No click will be taken into account. This method does not accept any arguments.
Action - disable
This action disable all menus. No click will be taken into account. This method does not accept any arguments.
Syntax
$(".selector").accordion("disable");

This action reactivate all menus. The clicks are again considered. This method does not accept any arguments.
Action - enable
This action reactivate all menus. The clicks are again considered. This method does not accept any arguments.
Syntax
$(".selector").accordion("enable");

This action gets the value of currently associated accordion element with the specified optionName. This takes a String value as argument.
Action - option( optionName )
This action gets the value of currently associated accordion element with the specified optionName. This takes a String value as argument.
Syntax
var isDisabled = $( ".selector" ).accordion( "option", "disabled" );

This action gets an object containing key/value pairs representing the current accordion options hash.
Action - option
This action gets an object containing key/value pairs representing the current accordion options hash.
Syntax
var options = $( ".selector" ).accordion( "option" );

This action sets the value of the accordion option associated with the specified optionName.
Action - option( optionName, value )
This action sets the value of the accordion option associated with the specified optionName.
Syntax
$( ".selector" ).accordion( "option", "disabled", true );

This action sets one or more options for the accordion.
Action - option( options )
This action sets one or more options for the accordion. Where options is a map of option-value pairs to set.
Syntax
$( ".selector" ).accordion( "option", { disabled: true } );

This action processes any headers and panels that were added or removed directly in the DOM. It then recomputes the height of the accordion panels. Results depend on the content and the heightStyle option. This method does not accept any arguments.
Action - refresh
This action processes any headers and panels that were added or removed directly in the DOM. It then recomputes the height of the accordion panels. Results depend on the content and the heightStyle option. This method does not accept any arguments.
Syntax
$(".selector").accordion("refresh");

This action returns the accordion widget element; the one annotated with the ui-accordion class name.
Action - widget
This action returns the accordion widget element; the one annotated with the ui-accordion class name.
Syntax
var widget = $( ".selector" ).accordion( "widget" );

Now let us see an example using the actions from the above table. The following example demonstrates 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 = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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>Tab 1</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat. 
               </p>
            </div>
            <h3>Tab 2</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
            </div>
            <h3>Tab 3</h3>
            <div>
               <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               </p>
               <ul>
                  <li>List item one</li>
                  <li>List item two</li>
                  <li>List item three</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>
Let us save the above code in an HTML file accordionexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat. 
               

                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               

                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud 
                  exercitation ullamco laboris nisi ut aliquip ex ea 
                  commodo consequat.      
               
List item one
List item two
List item three
Here we demonstrate enabling and disabling of the accordions. Select the respective radio buttons to check each action.
In addition to the accordion (options) method which we saw in the previous sections, JqueryUI provides event methods which gets triggered for a particular event. These event methods are listed below −
This event is triggered when a menu is activated. This event is only fired on panel activation, it is not fired for the initial panel when the accordion widget is created.
Event - activate(event, ui)
This event is triggered when a menu is activated. This event is only fired on panel activation, it is not fired for the initial panel when the accordion widget is created. Where event is of type Event, and ui is of type Object. Possible values of ui are −
newHeader − A jQuery object representing the header that was just activated.
newHeader − A jQuery object representing the header that was just activated.
oldHeader − A jQuery object representing the header that was just deactivated.
oldHeader − A jQuery object representing the header that was just deactivated.
newPanel − A jQuery object representing the panel that was just activated.
newPanel − A jQuery object representing the panel that was just activated.
oldPanel − A jQuery object representing the panel that was just deactivated.
oldPanel − A jQuery object representing the panel that was just deactivated.
Syntax
$( ".selector" ).accordion({
   activate: function( event, ui ) {}
});

This event is triggered before a panel is activated. This event can be canceled to prevent the panel from activating.
Event - beforeActivate(event, ui)
This event is triggered before a panel is activated. This event can be canceled to prevent the panel from activating. Where event is of type Event, and ui is of type Object. Possible values of ui are −
newHeader − A jQuery object representing the header that is about to be activated.
newHeader − A jQuery object representing the header that is about to be activated.
oldHeader − A jQuery object representing the header that is about to be deactivated.
oldHeader − A jQuery object representing the header that is about to be deactivated.
newPanel − A jQuery object representing the panel that is about to be activated.
newPanel − A jQuery object representing the panel that is about to be activated.
oldPanel − A jQuery object representing the panel that is about to be deactivated.
oldPanel − A jQuery object representing the panel that is about to be deactivated.
Syntax
$( ".selector" ).accordion({
   beforeActivate: function( event, ui ) {}
});

This event is triggered when the accordion is created.
Event - create(event, ui)
This event is triggered when the accordion is created. Where event is of type Event, and ui is of type Object. Possible values of ui are −
header − A jQuery object representing the active header.
header − A jQuery object representing the active header.
panel − A jQuery object representing the active panel.
panel − A jQuery object representing the active panel.
Syntax
$( ".selector" ).accordion({
   create: function( event, ui ) {}
});

The following example demonstrates the event method usage in accordion widgets. This example demonstrates the use of events create, beforeActive and active.
<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Accordion Example </title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <script>
         $(function() {
            $( "#accordion-6" ).accordion({
               create: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>Created</b><br>");
               },
					
               beforeActivate : function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     ", <b>beforeActivate</b><br>");
               },
					
               activate: function (event, ui) {
                  $("span#result").html ($("span#result").html () +
                     "<b>activate</b><br>");
               }
            });
         });
      </script>
      
      <style>
         #accordion-6{font-size: 14px;}
      </style>
   </head>
   
   <body>
      <div id = "accordion-6">
         <h3>Tab 1</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat. 
            </p>
         </div>
         <h3>Tab 2</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
         </div>
         <h3>Tab 3</h3>
         <div>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            </p>
            <ul>
               <li>List item one</li>
               <li>List item two</li>
               <li>List item three</li>
            </ul>
         </div>
      </div>
      <hr />
      <span id = result></span>
   </body>
</html>
Let us save the above code in an HTML file accordionexample.htm and open it in a standard browser which supports javascript, you must also see the following output −

               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat. 
            

               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            

               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore 
               magna aliqua. Ut enim ad minim veniam, quis nostrud 
               exercitation ullamco laboris nisi ut aliquip ex ea 
               commodo consequat.    
            
List item one
List item two
List item three
Here we are displaying a text at the bottom, based on events.
 Print
 Add Notes
 Bookmark this page