roland22fr5accordionLast week I had to create an accordion style menu for a project. Accordion menus are a very, very handy tool to show and hide information as needed. I have used them on sites like http://www.spokanesymphony.org and http://2008-2009.spokanesymphony.org. While the accordion system I used on these sites worked well, I decided to write my own using jQuery with the goal of making it as simple as possible.

I have found many of the existing accordion menu systems to be bloated and difficult to understand. I knew there had to be an easier way to create an accordion menu. Instead of using a list like most alternate systems, this system uses a grouping of DIV elements with specific names.

ORIGINAL VERSION: DEMO | DOWNLOAD

UPDATED VERSION: DEMO | DOWNLOAD *

* Note: The updated version was released on 3/25/10 and it is slightly different than the example detailed in this post, however, installation is virtually the same. The updated version addresses a number of frequent feature requests from fans of the script. These include use of jQuery 1.4.2, adding a mouseover effect, adding a selected effect, and the ability to close open menus by clicking their header.

Note: Here is an example of how to pin open the first item and an example of how to select any item to pin open on load.

 

 

How to implement this jQuery accordion style menu:

Step 1 – Include jQuery:

For a jQuery beginner the first thing you need to do is to include the jQuery library. Google hosts the library so you can link to it there. This can be done by putting the following code in the head of your document:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>

Step 2: – Create the JavaScript

Next you need to create a blank JavaScript file. For the example, this file is called javascript.js. This file will contain the jQuery code required for the menu. Once you save the file include it in the head of your document with the proper path just as we did the jQuery library in Step 1. An example of the JavaScript code to include in this document is shown below:

$(document).ready(function() {
 
	//ACCORDION BUTTON ACTION	
	$('div.accordionButton').click(function() {
		$('div.accordionContent').slideUp('normal');	
		$(this).next().slideDown('normal');
	});
 
	//HIDE THE DIVS ON PAGE LOAD	
	$("div.accordionContent").hide();
 
});

Step 3 – Create the CSS:

Now we need to create a CSS document with our two selectors accordionButton and accordionContent and then include that in the head of the document. Examples of these selectors are included below. The color, contents, and visual formatting can all be manipulated. It is important these elements retain their float: left or display: inline-block property so that they will display inline.

#wrapper {
	width: 800px;
	margin-left: auto;
	margin-right: auto;
	}
 
.accordionButton {	
	width: 800px;
	float: left;
	background: #003366;
	border-bottom: 1px solid #FFFFFF;
	cursor: pointer;
	}
 
.accordionContent {	
	width: 800px;
	float: left;
	background: #95B1CE;
	display: none;
	}

Step 4 – Create the HTML:

Now we need to create the HTML we’re going to manipulate. For this example we will keep the page very, very simple. In a more complicated HTML document you need to make sure the two classes used for the accordion DIV items are not used elsewhere. jQuery will be looking for the class of the element so if it is present elsewhere in the HTML document it will cause some unexpected problems. The full HTML document also displaying the includes is shown below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Accordion Style DIV Menu</title>
<link href="style/format.css" rel="stylesheet" type="text/css" />
<link href="style/text.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="includes/javascript.js"> </script>
</head>
 
<body>
	<div id="wrapper">
		<div class="accordionButton">Button 1 Content</div>
		<div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
		<div class="accordionButton">Button 2 Content</div>
		<div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
		<div class="accordionButton">Button 3 Content</div>
		<div class="accordionContent">Content 1<br />Short Example</div>
		<div class="accordionButton">Button 4 Content</div>
		<div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
	</div>
</body>
</html>

Notice that we have alternating rows with the styles accrodionButton and accordionContent. Clicking accordionButton will trigger the drop of the next instance of accordionContent. It is very important these elements alternate properly with nothing inbetween for the system to function properly. Each element can contain HTML, nested divs, or other styling elements.

Step 5 – Check out the Result!:

Now we have all of our code we need. View the system in the browser and it should work great. Clicking on each button will cause the content below it to drop. The content will retract if another button is clicked. (Note: If you needed to keep the content elements open after a click on a seperate button instead of having them retract you can do this easily by removing this line from the javascript.js include:

$('div.accordionContent').slideUp('normal');

View a complete example or download a complete example:

Click here to view the demo of the accordion style jQuery menu

Click here to download the demo files for the jQuery accordion style menu

No related posts.