Create an Accordion Menu with jQuery

August 27th, 2012 Leave a comment
Like the article?
Create an Accordion Menu with jQuery

jQuery is an open-source library that you can use to create animations, advanced effects and dynamic web pages. It is also a great way to add items such as menus to your site that incorporate some of these effects. In this article I will show youhow to use jQuery effects with your HTML interface and then how you can use those effects to create an accordion menu with animation that toggles to open sub-menu options. This is an excellent addition to your site that is easily within the grasp of someone new to jQuery.

Using Visual Effects with jQuery

jQuery has many visual effects that you can use to dress up your pages and create interesting user interface features. One of the most common effects to use is a show/hide component such as a button, textbox, menu, etc…Showing and hiding HTML elements is simple with jQuery. Here is an example:

<input type="text" name="username" id="user"/>
<input type="button" onClick="$('#myBox').hide()" value="Hide Textbox"/>

This snippet of code will allow us to hide a textbox with the ID “myBox” by calling the hide() function. To bring it back out for the user we can call the show() function:

$("#myBox").show();

Sliding items up and down on the screen is an easy effect as well. You just need to call the slideUp() and slideDown() functions to create the animation of the element moving.

$("someSpan").slideDown("slow", {
alert("Slide Complete");
});

These functions take a speed argument to adjust how fast or slow the element moves when it slides. The slideToggle() function works just like slideUp() and slideDown() and allows you to change the state of the element without knowing if it is up or down. The slideToggle() function is what we will use to create our accordion menu and slide our buttons.

Creating the Menu

Step 1: The HTML

To begin, we need to set up the HTML for our menu. This will be a simple unordered list that will show our menu/submenu options as a bulleted list. Here is the HTML:

<ul id="menu">
	<li><div>States</div>
		<ul>
			<li><a href="#">Florida</a></li>
			<li><a href="#">New York</a></li>
			<li><a href="#">California</a></li>
		</ul>
	</li>
	<li><div>Languages</div>
		<ul>
			<li><a href="#">Java</a></li>
			<li><a href="#">JavaScript</a></li>
			<li><a href="#">Python</a></li>
		</ul>
	</li>
	<li><div>Social Media</div>
		<ul>
			<li><a href="#">Facebook</a></li>
			<li><a href="#">Twitter</a></li>
			<li><a href="#">Google+</a></li>
		</ul>
	</li>
</ul>

If we look at our HTML in the browser, we would see something like this:

  • States
    • Florida
    • New York
    • California
  • Languages
    • Java
    • JavaScript
    • Python
  • Social Media
    • Facebook
    • Twitter
    • Google+

This will be the foundation for our menu. Next we need to add some CSS.

Step 2: The Stylesheet

To improve the look of our menu, we will use rounded corners which will work in most browsers but not Internet Explorer. In order to get a uniform look you would need to use an IE-specific stylesheet. The CSS will allow our menu items to look more like buttons, as well as hide the sub-menu items from view. Here is the CSS:

#menu {
	list-style: none;
	padding: 0 0 0 0;
	width: 170px;
}
#menu div {
	display: block;
	background-color: #3399FF;
	font-weight: bold;
	margin: 1px;
	cursor: pointer;
	padding: 5 5 5 7px;
	list-style: circle;
    		-moz-border-radius: 10px;
    		-webkit-border-radius: 10px;
	border-radius: 10px;
}
#menu ul {
	list-style: none;
	padding: 0 0 0 0;
}
#menu ul{
	display: none;
}
#menu ul li {
	font-weight: normal;
	cursor: auto;
	background-color: #fff;
	padding: 0 0 0 7px;
}
#menu a {
	text-decoration: none;
}
#menu a:hover {
	text-decoration: underline;
}

These styles allow us to change the width, padding and color of the buttons as well as round off the corners using the border-radius property. The display:none in the #menu ul selector will hide the sub-menu items. We will use jQuery to display these items so the menu is interactive. With these styles applied, our buttons now look like this:

Accordion Menu1

Step 3: Adding the jQuery

The basic menu is complete but we need to setup the jQuery to make the menu actually work properly. To give our accordion menu life we need to have the jQuery show or hide each sub-menu section as the user clicks on the main heading. The two main jQuery effects we are using are the SlideUp and SlideToggle. This will give our menu the appearance that the headings are moving up and down as the areas are shown.

Don’t forget to put in the jQuery script statement in the HEAD section of your document:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

We will add the jQuery script at the bottom of the page between the BODY and HTML tags:

<script>
$("#menu > li > div").click(function(){

	if(false == $(this).next().is(':visible')) {
		$('#menu ul').slideUp(300);
	}
	$(this).next().slideToggle(300);
});

$('#menu ul:eq(0)').show();

</script>

You will notice that by default the first sub-menu is being displayed with the line:

$('#menu ul:eq(0)').show();

If you do not want to have any of the sub-menu items expanded, you can remove this line or if you want to have a different sub-menu expanded you can add in its index number instead of zero.

Here is our completed menu:

Accordion Menu2

I hope you have enjoyed this according menu tutorial. Now that you understand the basics of how this menu goes together you should have no problem creating your own accordion menu for your site using jQuery. A download of this demo is available for you to use as a starting point.

Article Source Files

DescriptionNameSizeDownload method
Accordion Menu Source Codejquery-accordion-menu.zip1KBHTTP
Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!

Comment