CODEWITHSUNDEEP
jqueryhideshow
Mohammad Naji
Mohammad Naji

Reputation: 5442

jQuery.hide() hides, but .show() doesn't show them back

I have a div#content that has 3 divs inside (product-a-content, product-b-content and product-c-content) and each one has some children elements as well. At any time, only one of the 3 divs should be visible. The code to change the active div is this:

    $('.mainmenuitem').click(function(){
        $('#content div').hide();
        $('#content div#' + this.id + '-content').show();
    });

And the markup:

<div id="mainmenu">
    <div id="product-a" class="mainmenuitem"></div>
    <div id="product-b" class="mainmenuitem"></div>
    <div id="product-c" class="mainmenuitem"></div>
    <div style="clear: both;"></div>
</div>
<div id="content" class="box">
        <div id="product-a-content"><?php echo $product_a_info; ?></div>
        <div id="product-b-content"><?php echo $product_b_info; ?></div>
        <div id="product-c-content"><?php echo $product_c_info; ?></div>
</div>

They become hide, but not active, cannot be active then. (I'm even sure that the right id is returned to be visible again).

Upvotes: 0

Views: 221

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

$('#content div') hides all div inside #content, even the indirect children of #content element, when you display it back, you are displaying only the direct child div.

When you hide the elements, you need to hide only the direct divs

Try

$('.mainmenuitem').click(function(){
    $('#content > div').hide();
    $('#' + this.id + '-content').show();
});

Upvotes: 2

Related Questions