jquery - show multiple divs

**jre247** · November 5th, 2011 09:40 AM

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="<&#37;= 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>

**jre247** · November 5th, 2011 09:45 AM

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", "<&#37;=  Page.ResolveUrl("~/{0}/_res/_images/icon_alertMessage.png", PBS.Cms.Settings.PBSFolderName) %>");                               
            });
        });

    </script>

**the_cat** · November 7th, 2011 10:13 AM

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>

Thread: jquery - show multiple divs

Thread Tools

Display

jquery - show multiple divs

Re: jquery - show multiple divs

Re: jquery - show multiple divs

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions