Search code examples
jqueryhideshow

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.

Solution

  • .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();