How to Create Accordion Menu (CSS3+jQuery)

Step 1 – HTML Markup

The HTML is the same as the CSS3 version, a nested unordered list which will contain all of our links. We have added a class to each one to be able to add the images and the id is needed for the CSS3 only version. We will keep the CSS3 only version working so if the JavaScript will be disabled on the client browser it will continue working with just CSS.

Source: http://designmodo.com/jquery-accordion-menu/#ixzz1ozZOi4WX
 

<ul class="accordion">
 <li id="one" class="files">
  <a href="#one">My Files<span>10</span></a>
  <ul class="sub-menu">
   <li><a href="#"><em>01</em>Sub Menu<span>1</span></a></li>
  </ul>
 </li>
 <li id="two" class="mail">
  <a href="#two">Mail<span>20</span></a>
  <ul class="sub-menu">
   <li><a href="#"><em>01</em>Sub Menu<span>2</span></a></li>
  </ul>
 </li>
 <li id="three" class="cloud">
  <a href="#three">Cloud<span>30</span></a>
  <ul class="sub-menu">
   <li><a href="#"><em>01</em>Sub Menu<span>3</span></a></li>
  </ul>
 </li>
 <li id="four" class="sign">
  <a href="#four">Sign Out</a>
  <ul class="sub-menu">
   <li><a href="#"><em>01</em>Sub Menu</a></li>
  </ul>
 </li>
</ul> 

Step 2 – CSS Styling

The changes in the CSS code are very basic. The only thing that we would do is changing and adding some lines of code.
In the next three parts of code the only think that we will do is adding some lines of code to add the “active” class. This class will be used in the jQuery code.

Source: http://designmodo.com/jquery-accordion-menu/#ixzz1ozZgmo63
 

.accordion > li:hover > a,
.accordion > li:target > a,
.accordion > li > a.active {
 color: #3e5706;
 text-shadow: 1px 1px 1px rgba(255,255,255, .2);

 /*background: url(../img/active.png) repeat-x;*/
 background: #a5cd4e;
 background: -moz-linear-gradient(top,  #a5cd4e 0%, #6b8f1a 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));
 background: -webkit-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 background: -o-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 background: -ms-linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
 background: linear-gradient(top,  #a5cd4e 0%,#6b8f1a 100%);
}

.accordion > li:hover > a span,
.accordion > li:target > a span,
.accordion > li > a.active span {
 color: #fdfdfd;
 text-shadow: 0px 1px 0px rgba(0,0,0, .35);
 background: #3e5706;
}

.accordion li.files > a:before { background-position: 0px 0px; }
.accordion li.files:hover > a:before,
.accordion li.files:target > a:before,
.accordion li.files > a.active:before { background-position: 0px -24px; }

.accordion li.mail > a:before { background-position: -24px 0px; }
.accordion li.mail:hover > a:before,
.accordion li.mail:target > a:before,
.accordion li.mail > a.active:before { background-position: -24px -24px; }

.accordion li.cloud > a:before { background-position: -48px 0px; }
.accordion li.cloud:hover > a:before,
.accordion li.cloud:target > a:before,
.accordion li.cloud > a.active:before { background-position: -48px -24px; }

.accordion li.sign > a:before { background-position: -72px 0px; }
.accordion li.sign:hover > a:before,
.accordion li.sign:target > a:before,
.accordion li.sign > a.active:before { background-position: -72px -24px; }

Now we will remove the previous styles (height, overflow, etc.) and we will use the “display: none;” property to hide the sub menus and the “display: block” property to show the sub menus.
Source: http://designmodo.com/jquery-accordion-menu/#ixzz1ozZvv3o6

.accordion li > .sub-menu {
 display: none;
}

.accordion li:target > .sub-menu {
 display: block;
}

Step 3 – jQuery

First we will link to jQuery library using the last version hosted by Google, if you want you can host it on your own server, it’s your choice. Next add the following code to the bottom of you HTML file just before the closing tag.

Source: http://designmodo.com/jquery-accordion-menu/#ixzz1oza46ndP
 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
  // Store variables
  var accordion_head = $('.accordion > li > a'),
   accordion_body = $('.accordion li > .sub-menu');
  // Open the first tab on load
                accordion_head.first().addClass('active').next().slideDown('normal');
  // Click function
  accordion_head.on('click', function(event) {
   // Disable header links
   event.preventDefault();
   // Show and hide the tabs on click
   if ($(this).attr('class') != 'active'){
    accordion_body.slideUp('normal');
    $(this).next().stop(true,true).slideToggle('normal');
    accordion_head.removeClass('active');
    $(this).addClass('active');
   }
  });
 });
</script> 

We will start by storing this two variables. This will help to refer them and avoid to make jQuery jumping in the DOM to many times.

Source: http://designmodo.com/jquery-accordion-menu/#ixzz1ozcRbGBL

var accordion_head = $('.accordion > li > a'),
   accordion_body = $('.accordion li > .sub-menu'); 

This line of code will open the first accordion tab when the menu is loaded.

accordion_head.first().addClass('active').next().slideDown('normal'); 

Now we will disable the links of the accordion and only the sub menu links will be working.

event.preventDefault();

The next code will check if one of the accordion tabs is open and have the active class. So when you click on another tab it will remove and slide up the tab and add the active class and slide down the tab that you have clicked.

if ($(this).attr('class') != 'active'){
    accordion_body.slideUp('normal');
    $(this).next().stop(true,true).slideToggle('normal');
    accordion_head.removeClass('active');
    $(this).addClass('active');
   }

 

Demo | Download