A Simple Horizontal Accordion menu

First
Second
Third

Please understand that this is a simple example of using JQuery to expand containers with content. In this example the data is not loaded from an external source. The containers are simply hidden with CSS and then made visible again (with a slide effect) by using a simple JQuery command.

JQuery

Add a link to the JQuery file

CSS styles

Create CSS styles for links on the menu and for the containers with content.

The JQuery function

Create functions to expand the hidden content, per item.

$(document).ready(function(){

$("li#firstLink").click(function(){
$("#firstContent").slideToggle("slow").siblings(".accordionContent").slideUp("slow");
$(this).toggleClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});
});

$("li#secondLink").click(function(){
$("#secondContent").slideToggle("slow").siblings(".accordionContent").slideUp("slow");
$(this).toggleClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});

$("li#thirdLink").click(function(){
$("#thirdContent").slideToggle("slow").siblings(".accordionContent").slideUp("slow");
$(this).toggleClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});

})

</script>

Add your elements on the page

<div id="mainContainer">
<div id="accordionContainer">
<div class="accordionContent" id="firstContent"><img src="global/images/rheden_01.jpg" width="603" height="400" /></div>
<div class="accordionContent" id="secondContent"><img src="global/images/rheden_02.jpg" width="603" height="400" /></div>
<div class="accordionContent" id="thirdContent"><img src="global/images/arnhem_01.jpg" width="603" height="400" /></div>
</div>
<div id="accordionLinks">
<ul>
<li class="links" id="firstLink">First</li>
<li class="links" id="secondLink">Second</li>
<li class="links" id="thirdLink">Third</li>
</ul>
</div>
</div>

Explanation

$(document).ready(function(){
This function loads events before the page is loaded in the browser

$("li#firstLink").click(function(){
This is another function and fires when the user clicks on the item with the id firstLink ...

$("#firstContent").slideToggle("slow").siblings(".accordionContent").slideUp("slow");
.. after the user has clicked on the listed item the HTML element with the id (.firstContent) should toggle (slideToggle)slowly ("slow") and other siblings (those "having this common parent element") with the style class .accordionContent should .slideUp slowly

$(this).toggleClass("myCurrentItemStyle");
myCurrentItemStyle is a CSS style for the item which is opened. When the user clicks on the element this style should toggle. If the arrow is pointing to the left (for the current item) then this style should toggle with the initial style of listed items.

$(this).siblings(".links").removeClass("myCurrentItemStyle");
When the user clicks to open the current item, the style of all other siblings should be removed, and the initial style for the listed items should be used.

The whole code

<!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=utf-8" />
<title>Accordion</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
#mainContainer {
margin: auto;
width: 860px;
font: 80% Verdana, Geneva, sans-serif;
}
#accordionLinks {
margin-right: 690px;
}
#accordionLinks ul {
margin: 0;
padding: 0;
list-style: none;
}
#accordionLinks li {
border: 1px solid #ccc;
padding: 4px 10px;
width: 140px;
cursor: hand;
margin-bottom: 1px;
}
#accordionLinks ul li:hover {
background: #f0f0f0;
}
#accordionContainer {
width: 643px;
padding: 10px;
float: right;
}
#accordionLinks ul li.myCurrentItemStyle {
background: url(arrow_left.gif) no-repeat 98% 6px;
}
.accordionContent {
display:none;
background: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 1px;
}
</style>

$(document).ready(function(){
$("li#secondLink").click(function(){
$("#secondContent").slideToggle("slow").siblings(".accordionContent").slideUp("slow");
$(this).toggleClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});
});

$(document).ready(function(){
$("li#thirdLink").click(function(){
$("#thirdContent").slideToggle("slow").siblings(".accordionContent").slideUp("slow");
$(this).toggleClass("myCurrentItemStyle");
$(this).siblings(".links").removeClass("myCurrentItemStyle");
});
});
</script>
</head>

<body>
<div id="mainContainer">
<div id="accordionContainer">
<div class="accordionContent" id="firstContent"><img src="global/images/rheden_01.jpg" width="603" height="400" /></div>
<div class="accordionContent" id="secondContent"><img src="global/images/rheden_02.jpg" width="603" height="400" /></div>
<div class="accordionContent" id="thirdContent"><img src="global/images/arnhem_01.jpg" width="603" height="400" /></div>
</div>
<div id="accordionLinks">
<ul>
<li class="links" id="firstLink">Winter</li>
<li class="links" id="secondLink">Spring</li>
<li class="links" id="thirdLink">Autumn</li>
</ul>
</div>
</div>
</body>
</html>

The arrow

(original size: 11 x 11 pixels)

Opening one of the items when the page loads

$(document).ready(function(){
$("#secondContent").show();
$("li#secondLink").addClass("myCurrentItemStyle");
});

JQuery Tutorials

Accordion menu