Show/hide DIV with jQuery

It’s so simple to make show/hide div on click and it makes web pages even better.
Be sure first to call initial jQuery script. Then we create click event listener which is triggered when a users click the an object that has the class ‘show_hide’. Evritihing is placed in class ‘show_hide_div’ so it looks like it is part of show/hide button. This is simple script used on one element on web page. For more different show/hide divs on one web page I will explain in next post.

Javascript Jquery part of the script:

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

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

	$('.show_hide').click(function(){
	$(".slidingDiv").slideToggle();
	});

});

</script>

Css (very important ):

.slidingDiv {
    height:200px;
	padding:20px;
    margin-top:10px;

}
 .show_hide {
    display:none;
}
.show_hide_div {
position:relative;
 top:10px;
 left:10px;
    width: 400px;
	font-family: Arial,sans-serif;
	font-size: 22px;
	padding: 5px 5px 5px 5px;
	background-color:#B38FF2;
	-moz-border-radius: 9px;
	-webkit-border-radius: 9px;
	border-radius: 9px;
}

And the HTML part of the script:

<div class="show_hide_div">
<a href="#" class="show_hide">Show/hide</a>
<div class="slidingDiv">
Fill this space with your content. <a href="#" class="show_hide">hide</a></div>
</div>

Demo and download of this project: