JQuery

Menu And Items With Expand And Collapse View Using jQuery

In this blog, I will demonstrate how to create Menu and Items in Expand and Collapse style using jQuery, CSS and HTML.

Create menu and list of items for each menu

Here is the basic HTML part. 

  1. <body>  
  2.     <div class="container">  
  3.         <ul>  
  4.             <li class="dropdown cssState">  
  5.                 Tamilnadu  
  6.                 <ul>  
  7.                     <li>Chennai</li>  
  8.                     <li>Madurai</li>  
  9.                     <li>Trichy</li>  
  10.                     <li>Coimbatore </li>  
  11.                  </ul>  
  12.             </li>  
  13.    
  14.             <li class="dropdown cssState">  
  15.                 Andhra  
  16.                 <ul>  
  17.                     <li>Chennai</li>  
  18.                     <li>Madurai</li>  
  19.                     <li>Trichy</li>  
  20.                     <li>Coimbatore </li>  
  21.                 </ul>  
  22.             </li>  
  23.             <li class="dropdown cssState">  
  24.                 Kerala  
  25.                 <ul>  
  26.                     <li>Chennai</li>  
  27.                     <li>Madurai</li>  
  28.                     <li>Trichy</li>  
  29.                     <li>Coimbatore </li>  
  30.                 </ul>  
  31.             </li>  
  32.                 
  33.             <li class="dropdown cssState">  
  34.                 Tamilnadu  
  35.                 <ul>  
  36.                     <li>Chennai</li>  
  37.                     <li>Madurai</li>  
  38.                     <li>Trichy</li>  
  39.                     <li>Coimbatore </li>  
  40.                 </ul>  
  41.             </li>  
  42.    
  43.             <li class="dropdown cssState">  
  44.                 Andhra  
  45.                 <ul>  
  46.                     <li>Chennai</li>  
  47.                     <li>Madurai</li>  
  48.                     <li>Trichy</li>  
  49.                     <li>Coimbatore </li>  
  50.                 </ul>  
  51.             </li>  
  52.             <li class="dropdown cssState">  
  53.                 Kerala  
  54.                 <ul>  
  55.                     <li>Chennai</li>  
  56.                     <li>Madurai</li>  
  57.                     <li>Trichy</li>  
  58.                     <li>Coimbatore </li>  
  59.                 </ul>  
  60.             </li>  
  61.         </ul>   
  62.     </div>  
  63. </body>   

CSS style; which we need to use is for getting the menu and list output.

  1. <style>  
  2.         li.dropdown ul {  
  3.           display : none; /*To hide the items while loading the page */  
  4.         }  
  5.               
  6.         .container {  
  7.           width:70%;   
  8.           float: left;           
  9.         }  
  10.          
  11.         /* Main style part for the menu and items look and feel */  
  12.         .container .cssState {  
  13.             float: left;  
  14.             display:block;  
  15.             border-top-style: solid;  
  16.             border-top-width:1px;  
  17.             border-top-color:black;  
  18.             border-bottom-width:1px;  
  19.             border-bottom-color:grey;  
  20.             border-bottom-style:solid;  
  21.             width: 200px;  
  22.             border-right-style:solid;  
  23.             border-right-color:white;  
  24.             border-right-width:10px;            
  25.             padding: 2px;  
  26.             cursor: pointer;  
  27.             font-weight: bold;  
  28.         }  
  29.              
  30.     </style>  
  31.    
  32. Here is the jQuery which does the gimmicks of toggling items.  
  33.    
  34.   
  35. /* This is the place where the toggling of showing and hiding items happens*/  
  36.   
  37. <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>  
  38.   
  39. <script type="text/javascript">  
  40.     $(document).ready(function(){  
  41.         $('li.dropdown').click(function () {  
  42.             $('li.dropdown').not(this).find('ul').hide();  
  43.             $(this).find('ul').toggle();  
  44.         });  
  45.      });  
  46.     </script>    

The output looks, as shown below.
Figure 1

Hope, it will be useful for those, who are looking to create menu, sub menu and items list view, using simple CSS, HTML and jQuery.
Ebook Download
View all
Learn
View all
Get Started

You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

Become a sharper developer and jumpstart your career.

Basic

$0

$

. 00

monthly

For Basic members:

  • Standard Profile
  • Access learning courses
  • Access free e-books
  • 1x point
Premium

$20

$

. 00

monthly

For Premium members:

  • Earn 2x reward points
  • Premium profile with Verified check
  • Premium Avatar with status update
  • Learning courses
  • Unlimited Certifications and badges on profile
  • Unlimited Book downloads
  • Access to Premium content
  • Online Training
  • Unlimited PDF conversions and downloads
  • Professional Resume Writing
  • Interview Preparations Guide
  • 25 messages per month
  • 1 "Kodzu" avatar, basic
Elite

$45

$

. 00

monthly

For Elite members:

  • Bundle E-books
  • Access to all Learn Series
  • Unlimited Apply Jobs