how to hide & show div elements with jquery (not working on second div)

Question

Hi,

I have two div's. I want to show one and hide the other based on a condition. My problem is that jquery is only assigning the first div, I can tell this by looking at the web developer output to confirm, why?

if(!fd.getActiveXInstalled()) {
    $(".divActiveXdownloadButton").hide();
    $(".divActiveXNodownloadButton").show();  
} else {

    $(".divActiveXdownloadButton").show();
    $(".divActiveXNodownloadButton").hide();  
}

And markup:

<div>
    <div class="divActiveXdownloadButton" style="display:none;">
        <asp:ImageButton ID="BtnDownload" runat="server" ></asp:ImageButton>
    </div>
    <div class="divActiveXNodownloadButton" style="display:none;">
        <asp:ImageButton ID="BtnReturn" runat="server"></asp:ImageButton>
    </div>
</div>

Thank you, James

Answer 1

You shouldn't hide table cells at all, they are not intended to be used that way. Either put an element in the cell that you can hide, or don't use a table at all.

Answer 2

Try hiding the contained elements, I don't know what <asp:ImageButton>s turn into, assuming they are input elements of type image:

if(!fd.getActiveXInstalled()) {
    $('.tdActiveXdownloadButton > input[type=image]').hide();
    $(".tdActiveXdownloadButton > input[type=image]").show();  
} else {    
    $(".tdActiveXdownloadButton > input[type=image]").show();
    $(".tdActiveXdownloadButton > input[type=image]").hide();  
}

or maybe just try:

$('.tdActiveXdownloadButton').children().hide();

or:

$('.tdActiveXdownloadButton > *').hide();

Answer 3

Ohhh Duhhh! I was performing my script before the second div had been rendered! I needed some jscript right in the middle of my page to call a third party ActiveX control. I had mistakenly added my jscript along with that to hide and show controls. Unfortunately, some of those controls had not been renered yet. I have moved part of the jscript down and now it works.

Thanks to all who provided input.

James