How to Create Accordion Menu (CSS3+jQuery)

How to Create a Accordion Menu (jQuery Version) [Tutorial]

Topic: jQuery / CSS3
Difficulty: Intermediate
Estimated Completion Time: 30 mins

As you may noticed a few days ago we released a tutorial about How to Create an Accordion Menu in Pure CSS3. As this pure CSS3 Accordion Menu will not work on all browsers because the :target selector in not supported in the oldest browsers we decided to create a jQuery version of this menu. Also jQuery offers more stability and cross browser compatibility support so if you want to provide to your visitors/client a better product you may consider use this jQuery version.

Before you start reading this tutorial I recommend you to read the CSS3 Version as we will not cover all the steps and will focus only on the changes that need to be done for the jQuery version.

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.


<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.


.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.


.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.


<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.


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');
			}