Setting a div's display to none hides all child divs

Question

I have a page that contains a couple of divs, whose display are set to none, and then toggled via jquery whenever a user clicks on an associated li :

<ul id="switches">
    <li id="home" style="cursor: hand; cursor: pointer">HOME</li>
    <li id="vouchers" style="cursor: hand; cursor: pointer">GIFT VOUCHERS</li>
    <li id="reservations" style="cursor: hand; cursor: pointer">RESERVATIONS</li>       
    <li id="contact">
        <img src="images/loc.png" style="cursor : hand; cursor: pointer" />
    </li>
    <li id="menu">
        <img src="images/menu.png" style="cursor: hand; cursor: pointer" />
    </li>
</ul>

The switching code I got from this answer : https://stackoverflow.com/a/34710/914602

Whenever someone clicks the "home" li, I show the "content_home" div, etc.

<div id="content" style="float: right; width: 500px; margin-top: 15px">
    <div id="content_home" class="active">
        home
    </div>
    <div id="content_vouchers">
        voucher
    </div>
    <div id="content_reservations">
        reserv
    </div>
    <div id="content_contact">
        <div id="map_canvas" style="width:480px; margin-left:20px; height:300px">
        </div>
    </div>
    <div id="content_menu">
        menu
    </div>
</div>

On my "content_contact" div, I have another div, that I set to contain a Google Map (see here : http://code.google.com/p/jquery-ui-map/).

However, if the "content_contact" div's display is set to none (by clicking one of the other links), all the divs it contains are also hidden. When I set the display to block again, only the parent is set, not the children. (so... If I click "home", "content_home" is displayed. When I then click on "contact", "content_contact" is displayed, but the divs it contains (including the map)'s display is still set to none).

If I enumerate over all "content_contact"'s children, setting their display to block again, sure, the map div is displayed, but all the divs inside the map are also shown (stuff like the Map Data overlay, menu for selecting Satellite/Road style map, the Streetview menu etc) :

_{(source: 1sttime.co.za)}

Is there a way to only set the parent div to be invisible, while keeping the children as they are?

My divs were set to display:none by default, and whenever I'd activate (show) one, I'd addClass a class containing display:block; — Marcel, Jan 20 '12 at 07:56

score 1 · Answer 1 · answered Jan 19 '12 at 19:07

Nope. All elements have their own display values but by design if a parent has display:none then it's child elements will not be shown either. You would have to remove #map_canvas from within #content_contact if you want it to be displayed while it's parent is hidden.

The map issue may be unique to Google Maps which doesn't play nice with display:none. Instead of setting it to display:none you may want to try positioning it absolutely and moving it way off screen (ex: left:99999px) and then bringing it back when you want to display it again.

I don't want to display #map_canvas when it's parent is hidden. When the parent is hidden, and is shown again, #map_canvas is not displayed. — Marcel, Jan 20 '12 at 07:55

score 1 · Accepted Answer · answered Jan 19 '12 at 19:13

1

I bet it has to do with how you are hiding your other content.

I have a simplified example here that seems to work:

http://jsfiddle.net/jtbowden/3WSnD/

Remove the '>' from $('#content > div').hide(); and you will see the difference.

answered Jan 19 '12 at 19:13

Jeff B

29,943
7
61
90

Setting a div's display to none hides all child divs

2 Answers2