Use your left/right keys to browse tutorials
Simple jQuery Show/Hide Div

Simple jQuery Show/Hide Div

1 Star2 Stars3 Stars4 Stars5 Stars
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

demo download



More tutorials from Papermashup
  • SproutCreatives

    Got any ideas on how to use the same script show and hide and Div but also change the text of the link thats clicked? Like say from “MENU” to “CLOSE”.