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
Comments
199 discussions around Simple jQuery Show/Hide Div
Older Comments
  1. Kim says:

    I am using this on our website http://www.pristorvet.dk (the green button) but when I load the page it show’s the page quickly and then it vanish until the button is clicked.

    How can avoid this issue (it’s worse if you have slow internet, like on a mobile internet)

  2. koldtoft says:

    Nevermind. I solved that problem myself. It was just my DIV tags that was poorly made.

    Now I need a way to hide another div and show one when clicking

  3. koldtoft says:

    Sorry ignore my first message….

    I am tryign to use this on our website http://www.pristorvet.dk but have a problem.

    The problem is that I can’t make the DIV that i place this div inside, expand along with it. So if I place it like this

    I am trying to insert code here..

    <div style="min-height:100px;"> <!-- This div does not expand it's height when the other div expands inside it -->
    
    	<div class="slidingDiv"> <!-- THIS DIV is 300px high -->
    	My content <a href="#" class="show_hide">hide</a>
        </div>
    
    </div>
    

    I hope someone can help me withn this. I have also tried to z-index the div above other content as a half-ass sollution to what I need, but that also did not work.

  4. Poptropica says:

    There something wrong as I implement the code. it appears but in couple of seconds 2-3 it goes back or hide again. What went wrong? Im not really good in coding, hope you can help. I’ll bookmark your site just in case i can’t see an email reply.

  5. Akin says:

    Thanks alot……….God bless you

  6. Rich says:

    Awesome!! thank you

  7. aisha says:

    lovely article!!! thankyou

Older Comments




Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.
Subscribe
OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.
Subscribe

Get in contact

Please use the form below to get in contact. If your question is related to a free script download, please use the comments on the article page as community members are more likely to respond quicker than I can personally.

About Me

I'm Ashley Ford, Co-founder and Technical Director at Harkable.com London, UK. Previously I worked at InMobi, Spotify and MySpace. My interests include photography and making short videos I'm also an avid F1 fan. I'm always working on side projects. Here are a few: Easy Poll, We Deliver.



What do you specialise in?

I spend a lot of time coding in PHP and MySQL, as well as front end XHTML and CSS. I also specialise in javascript and the jQuery framework as well as being an avid designer. You can find me on dribbble

Interested in advertising?

If you'd like to advertise on Papermashup.com please get in touch via the contact link below for advertising opportunities.

How do I contact you

You can contact me here. and I'm available for consultation, freelance, programming book reviews.

Get on the mailing list

Join over 3000 people who have subscribed to the Papermashup inbox message, and be the first to find out about tutorial, competitions and giveaways.