Show_hide_multiple_div in jquery

Satyapriyanayak
Posted by Satyapriyanayak under jQuery category on | Points: 40 | Views : 1109
<!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(){

$("div.div_article").each(function(){ // this function is applicable for each div having class "div_article" dont take ID

var thisArticleDiv = this; // find the current article div

$("#imgOnOff", thisArticleDiv).click(function(){ // click the image #imgOnOff of current article div

// remove any one of comment line and see ur toggle effect
$("#divContent", thisArticleDiv).slideToggle("slow");
//$("#divContent", thisArticleDiv).slideToggle("fast");
//$("#divContent" , thisArticleDiv).fadeToggle("slow", "linear");
//$("#divContent" , thisArticleDiv).slideToggle(2000); // with time
//$("#divContent", thisArticleDiv).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 --------------
return false;

});
});

});

</script>

</head>

<body>

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


<div class="div_article" style="padding-top:10px;">
<div style="border:solid 1px #0073E6; background:#5EAEFF; 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-left:solid 1px #0073E6; margin-bottom:10px; border-right:solid 1px #0073E6; border-bottom:solid 1px #0073E6; background:#DDEEFF; 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>

<div class="div_article" style=" padding-top:10px;">
<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 2</div>

<div id="divContent" style="display:none;border-left:solid 1px #17D1F9; border-right:solid 1px #17D1F9; border-bottom: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 title2 <br /> <br /> </div>

</div>

<div class="div_article" style=" padding-top:10px;">
<div style="border:solid 1px #0073E6; background:#5EAEFF; 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 3</div>

<div id="divContent" style="display:none; border-left:solid 1px #0073E6; border-right:solid 1px #0073E6; border-bottom:solid 1px #0073E6; background:#DDEEFF; padding:5px 5px 5px 15px; font-family:Arial, Helvetica, sans-serif; font-size:12px;"> <br /> <br /> This is content of title3 <br /> <br /> </div>

</div>

<div class="div_article" style=" padding-top:10px;">
<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 4</div>

<div id="divContent" style="display:none;border-left:solid 1px #17D1F9; border-right:solid 1px #17D1F9; border-bottom: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 title4 <br /> <br /> </div>

</div>
</body>
</html>

Comments or Responses

Login to post response