A Simple Accordion with JQuery

Rheden in winter

Rheden in spring

Rheden in summer

CSS Styles

Create CSS styles for the HTML element where the user can click on to expand the accordion and for the content. I used H3 for headers and a layer for the content.

JQuery

Add a link to the JQuery file

The function

Create a function to expand the hidden content:

Add your accordion elements on the page

<h3>Header</h3>
<div class="myAccordionContent">content</div>

</div>

Explanation

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

$("#myAccordion h3").click(function(){
This is another function and is executed when the user clicks on H3 (tag) inside the container identified as myAccordion ...

$(this).next(".myAccordionContent").slideToggle("slow").siblings (".myAccordionContent").slideUp("slow");
.. the next HTML element (.next) with the class .myAccordionContent should toggle its visibility (slideToggle)slowly ("slow") and other siblings (those "having this common parent element") with the style class .myAccordionContent should .slideUp slowly

$(this).toggleClass("myCurrentItemStyle");
myCurrentItemStyle is a CSS style for the item which is opened.

$(this).siblings("h3").removeClass("myCurrentItemStyle");
When the user clicks to open the current item, the style of other siblings should be removed, and the initial style for the H3 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">
#myAccordionContainer {
width: 630px;
margin: auto;
font: 75.5% Arial, Verdana;
}
#myAccordion h3 {
font-size: 14px;
padding: 5px 10px 5px 29px;
margin: 0;
cursor: hand;
margin-bottom: 1px;
background: #ccc url(arrow_left.gif) no-repeat 4px 10px;
}
#myAccordion h3:hover {
background-color: #e3e2e2;
}
#myAccordion .myCurrentItemStyle {
background: #ccc url(arrow_down.gif) no-repeat 4px 10px;
}
.myAccordionContent {
display:none;
background: #fff;
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 1px;
}
</style>