Jquery hide() all elements with certain class except one

Question

<div class='hide'>A</div>
<div class='hide'>B</div>
<div class='hide' id='1'>C</div>

I have a function called showOne which should hide all elements and then show the one with id='1'.

function showOne(id) {
// Hide all elements with class = 'hide'
$('#'+id).show();
}

How do I hide all elements with class = 'hide' in jquery?

just a note - You can not have `id` that starts with number unless it is HTML5 — Bongs, May 16 '12 at 05:14

score 51 · Accepted Answer · answered May 16 '12 at 05:17

51

Try something like:

function showOne(id) {
    $('.hide').not('#' + id).hide();
}

showOne(1);

Demo: http://jsfiddle.net/aymansafadi/kReZn/

I agree with @TheSystemRestart though, "NOTE: DON'T USE ONLY NUMERIC ID".

answered May 16 '12 at 05:17

Ayman Safadi

11,502
1
27
41

+1 - Using .not() is a better solution because now you don't have to hide the element you want to show and then show it. Avoiding the "blinking" effect, I think is better UI experience. – Dec 28 '12 at 11:05
4

I just want to take a second and acknowledge how poorly written the example is, for a total newbie, simply because you named your class 'hide' as the .hide() function which could make people think that there is a link between the two. I see this pattern of naming everywhere and when I was learning it was a pain for me to go through such examples. – Edeph Mar 24 '16 at 14:03

score 7 · Answer 2 · edited May 23 '17 at 12:10

7

$('div.hide').hide(300,function() {  // first hide all `.hide`
   $('#'+ id +'.hide').show(); // then show the element with id `#1`
});

NOTE: DON'T USE ONLY NUMERIC ID. NOT PERMITTED. READ THIS

edited May 23 '17 at 12:10

Community

1
1

answered May 16 '12 at 05:13

The System Restart

2,873
19
28

1

Numeric IDs are permitted in html5 - are you aware of a current browser that doesn't support them? – nnnnnn May 16 '12 at 05:28

Hitesh Modha · Answer 3 · 2016-05-10T08:37:26.240

6

You have to access elements by css class name. To do this use . operator

$('.hide').hide();

It will hide all divs.

Now show one div by id;

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

Or you can also do this by using

$('.hide').eq(0).show();

It will show first div having class hide.

edited May 10 '16 at 08:37

answered Mar 31 '14 at 08:35

Hitesh Modha

2,740
5
28
47

score 0 · Answer 4 · answered May 16 '12 at 05:14

0

I'm almost ashamed of how easy the solution was and that I found it just after writing the question. Just:

$('.hide').hide();

answered May 16 '12 at 05:14

lisovaccaro

32,502
98
258
410

If you read an introductory jQuery tutorial (such as one of the ones on jQuery's website) you can learn all about the more common selectors (selecting by id, class, tag name, and selecting via parent/child relationships, etc), but it essentially the same as CSS selector syntax. Once you get the hang of that, deciding which method to call on the selected elements (e.g., `.hide()`) is the easy part. – nnnnnn May 16 '12 at 05:34
1

What about NOT hiding the element with id="1"? Your own answer isn't completely answering your own question! – Griknok Aug 25 '16 at 00:57

score 0 · Answer 5 · edited Dec 30 '13 at 11:52

0

Try:

function showOne(id) { 
    $('.hide').hide();
    $('#'+id).show(); 
}

edited Dec 30 '13 at 11:52

MysticMagicϡ

28,593
16
73
124

answered May 16 '12 at 05:25

HGK

386
1
4
13

score -1 · Answer 6 · answered May 16 '12 at 05:15

-1

You can hide all components with class as hide using . $('.hide').hide();

answered May 16 '12 at 05:15

Ankur Verma

5,793
12
57
93

Jquery hide() all elements with certain class except one

6 Answers6

Linked