Use your left/right keys to browse tutorials

Simple jQuery Show/Hide Div

Posted on June 2, 2009

Here’s a simple tutorial on how to show/ hide a div using jQuery. First we include the Google jQuery library, the next steps simple. We now setup a click event listener which is triggered when a users click the and object that has the class ‘show_hide’ which then toggles the div element with the class ‘slidingDiv’. In the HTML below we’ve setup a simple link with the class ‘show_hide’ and the content div in which we’ll show and hide which has the class ‘slidingDiv’. You’ll also notice in the first two lines of JavaScript we’re hiding the div content and showing the href this is so if the user doesn’t have JavaScript enabled they see the content box open but no option to hide it.

Hold up! Are you looking to show and hide multiple divs? Check out the latest tutorial on how to do this using a plugin i’ve written for this very job. Get the plugin here

The JavaScript

<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>

The HTML

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

The CSS


.slidingDiv {
	height:300px;
	background-color: #99CCFF;
	padding:20px;
	margin-top:10px;
	border-bottom:5px solid #3399FF;
}

.show_hide {
	display:none;
}

Although this code technique is simple its often required in projects.

Hold up! Are you looking to show and hide multiple divs? Check out the latest tutorial on how to do this using a plugin i’ve written for this very job. Get the plugin here