JQuery UI Accordion

Accordion is a widget groups multiple sections of webpage. By default usually one of the sections is expanded by default and rest of the sections are collapsed with only heading or title visible. When a user clicks the heading, that section expands and other sections are collapsed. This behavior can be customized though. JQuery UI accordion function allows developers to easily create according menus in their applications. To implement accordion menu in your application simply call the accordion() function with or without parameters on the element which you want acting as according menu. The following example will make it more clear.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Accordion</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#main-menu" ).accordion();
         });
      </script>

    <style>
        #main-menu{
            font-size: 15px;
            width: 50%;
            margin: 0 auto;
        }
        
        #main-menu .ui-accordion-header
        { 
            background-color: cornflowerblue;
    
        }
    
    </style>
     
   </head>
   <body>
      
   <div id="main-menu">
      <h3>Web Design</h3>
     
          <p>
          Vivamus eu urna tellus. Mauris id lectus imperdiet erat venenatis iaculis ut quis dui. Nullam nibh velit, ornare ut ante ut, commodo laoreet est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam nec eros erat. Aenean nibh leo, molestie vitae turpis in, pharetra cursus nulla. Vivamus vestibulum euismod purus pulvinar iaculis. Aenean consectetur non nisi non auctor. 
          </p>
      
       <h3>Web Development</h3>
      
          <p>
            Vestibulum justo risus, vehicula vitae interdum id, vestibulum non arcu. Nulla quis iaculis odio, quis malesuada erat. Suspendisse libero enim, rhoncus at rutrum ut, commodo non est. Nulla ullamcorper nunc sit amet egestas interdum. Aliquam eget leo nisi. Maecenas non ex sed urna mattis interdum. Nullam mattis dui eget rutrum lacinia. Praesent scelerisque nisi id blandit efficitur. Integer ac lorem sem. Ut dignissim nunc vitae dolor fermentum laoreet a a risus.    
          </p>
       
       <h3>Mobile Development</h3>
       
          <p>
            Morbi sit amet facilisis magna, sed viverra sapien. Nullam aliquet fringilla efficitur. Donec vel elementum lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eget venenatis arcu. Ut felis dui, condimentum eget pretium at, imperdiet at lorem. In mi dui, lobortis in odio vitae, sollicitudin finibus mi. Aliquam aliquam dolor ac sagittis venenatis.    
          </p>
     
   </div>
       
   </body>
</html>

Download Code Run Code

The above webpage contain an outer div with id “main-menu”. Inside the div there are three h3 elements.Each h3 element is followed by a paragraph. Here h3 element act as header. By default the first paragraph element visible. For the next two paragraphs, only the heading will be visible. Now, if you click the second heading, the first paragraph will be collapsed and the paragraph after the second heading will expand.

Accordion with Optional Parameters

You can also pass optional parameters to the accordion() function to change the behavior of the accordion element. The parameters are passed inside the curly brackets with each parameter separated by a comma. In the following example an optional parameter of collapsible with value true is passed to the accordion() function. By default, clicking an open section doesnt collapse it. However with collapsible property set to true, you can collapse an open section by clicking its header. Take a look at the following example.

<!DOCTYPE html>
<html>
<head>
    
    <title>JQuery UI Accordion with Optional Parameter</title>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
     <script>
         $(function() {
            $( "#main-menu" ).accordion({
               collapsible: true
            });
         });
      </script>

    <style>
        #main-menu{
            font-size: 15px;
            width: 50%;
            margin: 0 auto;
        }
        
        #main-menu .ui-accordion-header
        { 
            background-color: cornflowerblue;
    
        }
    
    </style>
     
   </head>
   <body>
      
   <div id="main-menu">
      <h3>Web Design</h3>
     
          <p>
          Vivamus eu urna tellus. Mauris id lectus imperdiet erat venenatis iaculis ut quis dui. Nullam nibh velit, ornare ut ante ut, commodo laoreet est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
          </p>
      
       <h3>Web Development</h3>
      
          <p>
            Vestibulum justo risus, vehicula vitae interdum id, vestibulum non arcu. Nulla quis iaculis odio, quis malesuada erat. Suspendisse libero enim, rhoncus at rutrum ut, commodo non est. Nulla ullamcorper nunc sit amet egestas interdum.    
          </p>
       
       <h3>Mobile Development</h3>
       
          <p>
            Morbi sit amet facilisis magna, sed viverra sapien. Nullam aliquet fringilla efficitur. Donec vel elementum lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras eget venenatis arcu.  
          </p>
     
   </div>
       
   </body>
</html>

Download Code Run Code

<<< JQuery UI SortableJQuery UI Autocomplete >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .