CODEWITHSUNDEEP
jqueryhideshow
bobber205
bobber205

Reputation: 13372

Jquery Hide() and Show() Not Working -- Extremely Frustated

I have some HTML like this

<div id="topContainer">
 <div id="level1" style="display:none;"> </div>
 <div id="level2" style="display:none;"></div>
</div>

I can retrieve level1 and level2, calling show() and hide() on them successfully. However, having style="display:none;" and then calling jQuery("#topContainer").show() does nada. :(

What could possibly be wrong?

JS Below

//LOGIC HERE THAT SHOWS LEVEL1 and LEVEL2 based on business logic

//If neither div is shown (got a variable set to false, it set to true each time
//the business logic shows the div
//if variable is still false, then the below line runs
jQuery("#topContainer").hide()

Updated with as much code as I can.

Upvotes: 3

Views: 10149

Answers (4)

Arun Prasad E S
Arun Prasad E S

Reputation: 10115

My issue was different, situation a little different though

The script was placed before the DOM created the element to hide.

I change the script to the "after page load"

$(function(){
   // logic
});

Upvotes: 0

Mottie
Mottie

Reputation: 86413

I wonder if the logic to hide the #topContainer is causing the problems. I set up a demo here to display the utility of the :empty selector; but in order for an element to be considered empty, it can not even contain even a single space (text node).

With the HTML you provided. I've set up a demo here... add content in the div then re-run the script, and you can see the difference.

var container = $('#topContainer'),
    divs = container.find('div'),
    empty = divs.filter(':empty');

if (divs.length == empty.length) {
    // hide container!
    $('#topContainer').hide();
    alert('hidden!');
} else {
    // don't do anything
    alert("don't hide!");
}

Upvotes: 1

mpdonadio
mpdonadio

Reputation: 2941

Does $("#topContainer").css("display", "block"); work?

Does $("#topContainer").css("background", "red"); work?

Have you poked around with Firebug or something else that can show the actual DOM properties before and after, along with the rule cascade.

My suspicion would be that #topContainer is getting display set via something else, or another there is another div with #topContainer` further down the page (which would be invalid HTML).

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630359

.show() and.hide() on a parent doesn't affect the children, if they're hidden they stay hidden...they're handled independently.

However, you can call .show() on the children as well if needed, for example:

jQuery("#topContainer").show().children().show();

Upvotes: 7

Related Questions