Can this 2-liner jquery be shortened to 1 line?

Question

I have these divs, each have the same class .onediv and distinct ids div1, div2, div3

<div class="alldivs">
   <div class="onediv" id="div1">
   </div>
   <div class="onediv" id="div2">
   </div>
   <div class="onediv" id="div3">
   </div>
</div>

I want to use jquery to change their css display property so that all of them are display none except id=div2 which is display block . Right now I'm doing it this way with 2 lines. Is there a quicker way to do the same thing with one line only?

$('.onediv').css('display', 'none');    
$('#div2').css('display', 'block');

Answer 1

If you're hiding/showing amongst siblings then the most generic (and still performant) solution is to use .siblings() , like this:

$("#div2").show().siblings().hide();

Note that .show() and .hide() are shortcuts for setting the display CSS property like you want here (between none and what it was before, block in the default <div> case).

Answer 2

$('.onediv:not(#div2)').css('display', 'none');

Answer 3

it is possible using filter function, but not recommended for performance reason:

$('.onediv').hide().filter('#div2').show();

Answer 4

$('#div2').siblings().css('display', 'none');

Answer 5

Here is a creative one (but not necessarily useful):

$(".alldivs > div:even").hide();

Here is another one:

$(".onediv:not(:eq(1))").hide();

This code expects that by default your divs are not hidden (ie. no display:none in your css)

Answer 6

Try this:

$('.onediv').not('.onediv:last-child').css('display', 'none');    

Please don't downrank. this works: check here: http://jsfiddle.net/ASBcg/

EDIT: If you want explicitly show that div this would be better:

$('.onediv').css('display', 'block').not('.onediv:last-child').css('display', 'none');