-
November 5th, 2011, 09:40 AM
#1
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>
Last edited by PeejAvery; November 5th, 2011 at 04:14 PM.
Reason: Added code tags
-
November 5th, 2011, 09:45 AM
#2
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>
Last edited by PeejAvery; November 5th, 2011 at 04:14 PM.
Reason: Added code tags
-
November 7th, 2011, 11:13 AM
#3
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>
Tags for this Thread
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|