Question

I’d like to hide a complete div container except one div.

So, on startup just show div id "box_5" and hide the rest.
When I click button 1 show everything and when I click button 2 hide everything again.

The problem is when I hide the "wrapper" div it is hiding everything including id=box_5.

I think the problem is the div is within the wrapper div but I don’t know a work-around?

<button id="button_1">show</botton>
<button id="button_2">hide</botton>

<div id="wrapper">
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
<div id="box_4"></div>
<div id="box_5">always show this</div>
<div id="box_6"></div>
<div id="box_7"></div>
<div id="box_8"></div>
<div id="box_9"></div>
<div id="box_10"></div>
</div>




$(document).ready(function() {
    $('#wrapper').not(":eq(#box_5)").hide();
    $('id="button_1"').click(function() {
        $('#wrapper').show();
        $('id="button_2"').click(function() {
            $('#wrapper').not(":eq(#box_5)").hide();
        });

    });

Answer 1

Change

$('#wrapper').not(":eq(#box_5)").hide(); 

to

$('#wrapper').not("#box_5").hide();

Note: Removed the eq selector. eq selector works on the index and in your case you don’t need eq selector as you know the ID of the div.

Also please change your handler functions like below,

$('#button_1').click(function() {
    $('#wrapper').show();
});

$('#button_2').click(function() {
    $('#wrapper').not("#box_5").hide();
});