X

jQuery Show/Hide Div Working Example

Are you looking a jQuery script which allows you to show /hide a div in html? Here is a simple light weight script which is compatible with major web browsers. For using this script first you need to include jQuery library in your page, you can either use a downloaded version of jQuery or Google jQuery library. This example is using Google jQuery library.

Once jQuery included (before ) the next part is to make a link which display Show/hide menu. By clicking on this link a div will display and once again clicked it will hide. Now we can go to scripting part, please look below.

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(){
 
        $(".mySlder").hide();
        $(".showHide").show();
 
    $('.showHide').click(function(){
    $(".mySlder").slideToggle();
    });
 
});
 
</script>

The CSS

.mySlder {
	float:left;
	width:100%;
	height:100px;
	background-color: #FFCC00;
}
 
.showHide {
    display:none;
}

The HTML

<a href="#" class="showHide">Show/hide</a>
<div class="mySlder">
Your content goes here <a href="#" class="showHide">Hide me</a>
</div>



The COMBAINED PAGE 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Show/Hide Div Working Example</title>
<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(){
 
        $(".mySlder").hide();
        $(".showHide").show();
 
    $('.showHide').click(function(){
    $(".mySlder").slideToggle();
    });
 
});
 
</script>
<style type="text/css">
<!--
.mySlder {
	float:left;
	width:100%;
	height:100px;
	background-color: #FFCC00;
}
 
.showHide {
    display:none;
}
-->
</style>
</head>
 
<body>
<a href="#" class="showHide">Show/hide</a>
<div class="mySlder">
Your content goes here <a href="#" class="showHide">Hide me</a>
</div>
</body>
</html>