CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 3 of 3
  1. #1
    Join Date
    Nov 2011
    Posts
    2

    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="<&#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>
    Last edited by PeejAvery; November 5th, 2011 at 04:14 PM. Reason: Added code tags

  2. #2
    Join Date
    Nov 2011
    Posts
    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", "<&#37;=  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

  3. #3
    Join Date
    Jun 2009
    Posts
    113

    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
  •  





Click Here to Expand Forum to Full Width

Featured