CODEWITHSUNDEEP
javascriptjqueryhtml
Paul Jeggor
Paul Jeggor

Reputation: 489

Show element in hiddens elements

HTML

<body>
    <span>test</span>
    <span>test</span>
    <span>test</span>
    <span id="show">aaaaaa</span>
</body>

JS

$('body').hide();

$('#show').show();

Why doesn't this work? How can I make it work?

Now all is hidden, but if I use $('#show').show(); it should make #show visible. Is this possible? If yes, how?

I want hide all elements without #show, but I can't modify the HTML.

Upvotes: 1

Views: 91

Answers (7)

GOK
GOK

Reputation: 2428

$('body').find('*').not('#show, #show > *').hide();

Upvotes: 1

jbabey
jbabey

Reputation: 46647

To hide all elements without id="show", you can use the not function:

$('body').find('*').not('#show').hide();

or the :not psuedoselector:

$('body').find(':not("#show")').hide();

Edit: to also show all children of #show, add that to the not selector:

$('body').find('*').not('#show, #show > *').hide();​

http://jsfiddle.net/ZD7gm/3/

Upvotes: 3

jAndy
jAndy

Reputation: 235962

By setting display: none on the document.body (that is what .hide() basically does), the second call to #show becomes pretty much irrelevant, because the parent is still hidden (body).

You would need to select all elements, without the specific node and hide those.

$(document.body).contents().not('#show, #show *').hide();

Upvotes: 4

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

Because #show is inside body, which is not visible.
body defines the document's body and it contains all your elements, so if you hide it you'll hide all your elements.
Try to hide just the elements you want to.

Upvotes: 4

Robert
Robert

Reputation: 3074

Try appending span after the body tag, like this.

<body>
    <span>test</span>
    <span>test</span>
    <span>test</span>
    <span id="show">aaaaaa</span>
</body>    

$('body span').hide();

$('#show').show();

jsfiddle.net example

Upvotes: 1

j08691
j08691

Reputation: 207861

Try this instead:

$('body').contents().hide();
$('#show').show();​

jsFiddle example

This will hide all children of the body and show the element with ID show.

Upvotes: 2

MrOBrian
MrOBrian

Reputation: 2189

Hide the other elements, not the whole body.

$('span').hide();
$('#show').show();

Upvotes: 1

Related Questions