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="" type="text/javascript"></script>
<script type="text/javascript">






Css (very important ):

.slidingDiv {

 .show_hide {
.show_hide_div {
    width: 400px;
	font-family: Arial,sans-serif;
	font-size: 22px;
	padding: 5px 5px 5px 5px;
	-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>

Demo and download of this project:

You may also like...

1 Response

  1. Cady says:

    This has made my day. I wish all pstiongs were this good.

Leave a Reply

Your email address will not be published. Required fields are marked *

Captcha Captcha Reload

This site uses Akismet to reduce spam. Learn how your comment data is processed.