jquery - show multiple divs
I'm wondering how I can show multiple divs after a user clicks on an img link with div "importantImg" below using jquery (importantImg isn't below but is in my program). The problem is that this is just one snippet of the entire page that also has divs, so I don't want to make my select be "div," I just want to interact with these 4 specific divs and show them all, including their html content. Here's the html that contains the 5 divs:
Code:
<div id="divLayer1">
<div id="divLayer2" class="alertPod">
<img src="<%= Page.ResolveUrl("~/{0}/_res/_images/icon_alertMessage.png", PBS.Cms.Settings.PBSFolderName) %>" />
</div>
<div id = "divLayer3" class="msgPod">
<div id= "divLayer4" class="messageWrapper">
<h6>IMPORTANT ANNOUNCEMENT</h6>
<div class="box">
<div id="divLayer5" class="viewport" style="overflow: auto; height: 48px;" runat="server">
<p> <%--id= "importantMessage">--%>
<asp:Literal ID="ltimportantannouncementTitle" runat="server"></asp:Literal>
<br />
<asp:Literal ID="ltimportantannouncementSummary" runat="server"> </asp:Literal>
</p>
</div>
</div>
</div>
<a href="#" ><img id="alertCloseBtn" src="<%= Page.ResolveUrl("~/ {0}/_res/_images/button_alertMsgClose.png", PBS.Cms.Settings.PBSFolderName) %>" /> </a>
Re: jquery - show multiple divs
Here's the jquery script I'm using that isn't working:
Code:
<script type="text/javascript">
$(document).ready(function () {
$("img#importantImg").click(function () {
$("#divLayer1").show();
$("#divLayer2").show();
$("#divLayer3").show();
$("#divLayer4").show();
$("#divLayer5").show();
$("#importantImg").attr("src", "<%= Page.ResolveUrl("~/{0}/_res/_images/icon_alertMessage.png", PBS.Cms.Settings.PBSFolderName) %>");
});
});
</script>
Re: jquery - show multiple divs
If you want to access a specific element in jQuery, then use the #selector, as you've done, but if you want to access a group of elements, I would suggest assigning a class to them and then use the .selector to get to all the elements of that class.
So in the code below I have assigned a click function to the specific importantImg ID, but then iterate through each class member and change its display. I've used toggle but just change it to show if you only want one way display.
<style>
.showhide {
display:none;
}
</style>
<script type="text/javascript">
$(function(){
$('#importantImg').bind('click',function(event) {
$('.showhide').each( function() { $(this).toggle(); });
});
});
</script>
</head>
<body>
<div id="importantImg"><a href="#">Click here</a></div>
<div id="divLayer3" class="showhide" >divLayer3<br/></div>
<div id="divLayer4" class="showhide" >divLayer4<br/></div>
<div id="divLayer5" class="showhide" >divLayer5<br/></div>
</body>