Show_hide_single_div in jquery

Satyapriyanayak
Posted by Satyapriyanayak under jQuery category on | Points: 40 | Views : 918
<!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>Untitled Document</title>
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#imgOnOff").click(function(){

// remove any one of comment line and see ur toggle effect
//$("#divContent").slideToggle("slow");
//$("#divContent").slideToggle("fast");
//$("#divContent").fadeToggle("slow", "linear");
//$("#divContent").slideToggle(2000); // with time
$("#divContent").toggle("slow"); // annimated resize div with fade

// change image src -------- start--------------
var src = $(this).attr('src');
//image src is iconPlus.gif make it iconMinus.gif

if(src == 'images/iconPlus.gif') {
$(this).attr('src','images/iconMinus.gif');
return false;
}

//image src is iconMinus.gif make it iconPlus.gif
if(src == 'images/iconMinus.gif') {
$(this).attr('src','images/iconPlus.gif');
return false;
}
// change image src -------- end --------------

});

});


</script>

</head>

<body>

<strong>This will work for single DIV</strong>
<br />
<br />

<div style="border:solid 1px #17D1F9; background:#E0F9FE; padding:5px 5px 5px 15px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;"><img id="imgOnOff" src="images/iconPlus.gif" />&nbsp;&nbsp;&nbsp;&nbsp;Title 1</div>


<div id="divContent" style="display:none; border:solid 1px #17D1F9; background:#E0F9FE; padding:5px 5px 5px 15px; font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<br />
<br />
This is content of title1
<br />
<br />
</div>


<div style="border:solid 1px #17D1F9; background:#E0F9FE; padding:5px 5px 5px 15px; font-family:Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold;"><img id="imgOnOff" src="images/iconPlus.gif" />&nbsp;&nbsp;&nbsp;&nbsp;Title 1</div>


<div id="divContent" style="display:none; border:solid 1px #17D1F9; background:#E0F9FE; padding:5px 5px 5px 15px; font-family:Arial, Helvetica, sans-serif; font-size:12px;">
<br />
<br />
This is content of title1
<br />
<br />
</div>

</body>
</html>

Comments or Responses

Login to post response