toggle one element and hide the rest under same wrapper class

Question

jQuery:

$("#star_btn1").click(function() {
$('#ca').toggle();
// I would like to hide everything EXCEPT CA under parent wrapper .allthestates 

});

HTML:

<div class="allthestates">

<!-- there are div ids here with every 50 states, all states are display none in css by default, the problem is the JS -->

<div id="ca">content</div>

</div>

So click button #star_btn1 then id #ca under .allthestates displays -- everything else will not.

There is no `#ca` in `.allthestates`. Show all HTML please - Anyway, if you target one specific element with its ID as you do, others element won't be affected. — Jeremy Thille, Mar 20 '15 at 14:35
What about adding a class to the states such as `.states` then you can hide/show these as a group and hide/show `#ca` independently even if they are under the same parent. — jonmrich, Mar 20 '15 at 14:40
If you want to make 50 buttons using `id` is bad idea. Look an example http://jsfiddle.net/1crLLus7/ — tutankhamun, Mar 20 '15 at 15:06
Please improve this question by including the HTML code you are working on — William Entriken, Mar 20 '15 at 17:08
@FullDecent what does the HTML have to do with anything?! Cant you imagine 50 divs with with id of states?! — Dr Upvote, Mar 20 '15 at 17:36

KJ Price · Accepted Answer · 2015-03-20T14:48:39.937

1

Try the ":not()" selector and the ">" (immediate children), you can do something like this:

$("#star_btn1").click(function() {
    $('.allthestates > :not(#ca)').hide();
    $('#ca').show();
});

<div class="allthestates">
   <div class="state" id="CA">California</div>
   <div class="state" id="TX">Texas</div>
</div>

edited Mar 20 '15 at 14:48

answered Mar 20 '15 at 14:39

KJ Price

5,774
3
21
34

No, everything else doesn't have a specific class. I can't do that because I will be making 50 buttons for every state. I would have to make a ton more classes to identify everything else for each button. – Dr Upvote Mar 20 '15 at 14:40
the .not or :not() operator avoids these situations. – Jordumus Mar 20 '15 at 14:42
2

Why the downvotes? I was guessing on a very vague example of HTML. – KJ Price Mar 20 '15 at 14:46
1

I changed it to use the :not() selector on everything other than `#ca` element. – KJ Price Mar 20 '15 at 14:52
Hi Mr. @KJPrice I downvoted it because it was the worst solution for scalability! But your revised is excellent! – Dr Upvote Mar 20 '15 at 14:54

score 0 · Answer 2 · answered Mar 20 '15 at 14:40

0

JQuery has the "not" function you can call to exclude any elements you wish.

$("#star_btn1").click(function() {
$('.allthestates').children().not('#ca').toggle();
// I would like to hide everything EXCEPT CA under parent wrapper .allthestates 

});

answered Mar 20 '15 at 14:40

Chase W.

1,343
2
13
25

Jordumus · Answer 3 · 2015-03-20T14:52:56.090

0

Have a look here: http://www.w3schools.com/jquery/sel_not.asp

$(".allthestates:not(.allthestates #ca)").hide();

With the help of Vohuman, we came to this even better result:

$(".allthestates > :not(#ca)").hide();

The ">" selector gets all the direct childs from the first selector, and from that collection we exclude the one with id "#ca".

edited Mar 20 '15 at 14:52

answered Mar 20 '15 at 14:40

Jordumus

2,763
2
21
38

1

The `:not` here excludes a `.allthestates` element that doesn't have `ca` id from the set. – Ram Mar 20 '15 at 14:45
@Vohuman you're right, corrected my code. – Jordumus Mar 20 '15 at 14:46
Sorry, the current selector doesn't make a lot of sense, it excludes a child from a set of parents. How about: `$(".allthestates > :not(#ca)").hide()`? – Ram Mar 20 '15 at 14:50
@Vohuman I might be editing too fast. :) it did make sense, in a strange, abstract way. ;-) But as your solution makes sense in a not-so-abstract way, I re-edited. :) – Jordumus Mar 20 '15 at 14:53

score 0 · Answer 4 · answered Mar 20 '15 at 14:51

0

Try this

$("#star_btn1").click(function() {
    $('.allthestates').children().hide().filter('#ca').show();
});

answered Mar 20 '15 at 14:51

tutankhamun

880
2
11
21

toggle one element and hide the rest under same wrapper class

4 Answers4