Simple Accordion with CSS and jQuery

Step 1. HTML:

Markup is pretty simple, a h2 and div class="slider_container" following right after. The h2 is the heading of our accordion item. We will be using this as our trigger with jQuery. The div class="slider_container" is what will be sliding up and down to show its content.

<div class="container">




<h2 class="content active">Heading 1 </h2>
<div class="slider_container" style="display: block;">
<div class="block">
text will come here text will come here text will come here text will come here text will come here

</div>

</div>  
<h2 class="content">Heading 2 </h2>
<div class="slider_container" style="display: none;">


<div class="block">
text will come here text will come here text will come here text will come here text will come here

</div>

</div>  
<h2 class="content">Heading 3</h2>
<div class="slider_container" style="display: none;">


<div class="block">
text will come here text will come here text will come here text will come here text will come here

</div>

</div>  
<h2 class="content">Heading 4 </h2>
<div class="slider_container" style="display: none;">
<div class="block">
text will come here text will come here text will come here text will come here text will come here

</div>



</div>  
<h2 class="content">Heading 5</h2>
<div class="slider_container" style="display: none;">

<div class="block">
text will come here text will come here text will come here text will come here text will come here

</div>


</div>  

</div>

Step 2.Styling CSS:

h2.content {
background: none repeat scroll 0 0 #1A1B1B;
border: 1px solid #4A4A4A;
color: #F98C00;
cursor: pointer;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
height: 25px;
margin: 1px 0 0;
padding: 7px 5px 0;
text-transform: uppercase; 
width:600px;
}
h2.content a {
color: #F98C00;
text-decoration: none; 
display: block;
padding: 0 0 0 0px;
}
h2.content a:hover {
color: #ccc;
}
h2.active {/*background-position: left bottom;*/}
.slider_container {
margin: 0 0 0px; padding: 0;
overflow: hidden;
font-size: 1.2em;
width: 310px;
clear: both;


}
.slider_container .block {
padding-left: 2px; padding-right:2px;
}
.slider_container .block p {
color: #666666;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
padding: 5px 5px 5px 18px;
position: relative;
text-align: left;
}
.slider_container h3 {
font: 2.5em normal Georgia, "Times New Roman", Times, serif;
margin: 0 0 10px;
padding: 0 0 0px 0;

}
.slider_container img {
float: right;
margin: 10px 15px 15px 0;
padding: 5px;
/*background: #ddd;
border: 1px solid #ccc;*/
}

Step 3. Setting up jQuery

Initial Step
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

Directly after the line where you called your jQuery, start a new script tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.

$(document).ready(function() {
//Code goes here
});

 jQuery

The following script contains comments explaining which jQuery actions are being performed.
var $ = jQuery.noConflict();
$(document).ready(function(){
    
//Set default open/close settings
$('.slider_container').hide(); //Hide/close all containers
$('.content:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.content').click(function(e){
    e.preventDefault();
    if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
    
        $('.content').removeClass('active').next().slideUp('slow'); //Remove all .content classes and slide up the immediate next container
        $(this).toggleClass('active').next().slideDown('slow'); //Add .content class to clicked trigger and slide down the immediate next container
    }
    return false; //Prevent the browser jump to the link anchor
});

});