Question

I’m wondering how I can show multiple divs after a user clicks on an img link “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. Here’s the html that contains the 5 divs:

<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> 

Here’s the jquery script I’m using that isn’t working:

<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>

Answer 1

Two things here:

1) You don’t need to do a $(document).ready() for every function you have. You can do it once and then put everything inside that.

2) Your example is a bit tricky, since this is a jQuery question and there’s ASP code in there. Here’s my interpretation of what you’re trying to do:

Javascript:
$(document).ready(function() {
$(‘#show_message’).click(function() {
$(‘.message’).html(‘This is an important message!’);
$(‘.alert_pod’).show();
});

        $('#hide_message').click(function() {
           $('.alert_pod').hide();
       });
    });

HTML:

Show Message

Important Message Goes Here
Hide Message

I don’t know ASP (or whatever you’re using), but I suspect that the problem is that some of your elements don’t seem to have IDs. You’re calling them in the Javascript, but the JS can’t find the elements because there is no id=”importantImg” as near as I can tell.

Hope that helps.