CODEWITHSUNDEEP
jquerydom
jskunkle
jskunkle

Reputation: 1311

Show/hide multiple elements

Having to control the visibility of a number of dom elements based on a number of logic checks - I really would like something like this in jquery:

$('.FirstPanel').visible = (condition == 1 || othercondition == true);
$('.SecondPanel').visible = (condition > 3 || othercondition == false);
$('.ThirdPanel').visible = (condition < 3 || stillanothercondition = 'asdf');
etc

Of course I can express the code above using if or switch statements and calling $('.FirstPanel').hide()...but it would require many times the number of lines of code. 

if(condition == 1 || othercondition == true) {
    $('.FirstPanel').show();
    $('.SecondPanel').hide();
    $('.ThirdPanel').hide();
} else if (condition > 3 || othercondition == false) {
    $('.FirstPanel').hide();
    $('.SecondPanel').show();
    $('.ThirdPanel').hide();
} etc

I feel I'm missing something obvious. Thanks

2012.09.24 Update

Thanks for the answers everyone - the toggle method is the ticket (see Michaël Witrant's accepted answer below)

Upvotes: 1

Views: 246

Answers (2)

Micha&#235;l Witrant
Micha&#235;l Witrant

Reputation: 7714

$('.FirstPanel').toggle(condition == 1 || othercondition == true);
$('.SecondPanel').toggle(condition > 3 || othercondition == false);
$('.ThirdPanel').toggle(condition < 3 || stillanothercondition = 'asdf');

http://api.jquery.com/toggle/

Upvotes: 3

NedStarkOfWinterfell
NedStarkOfWinterfell

Reputation: 5153

Try something like:

$(".element").css("display", function() { value = (condition == 1 || othercondition == true); if (value) { return 'block'; /*or 'inline' or 'inline-block'*/ } 
return 'none'; });

Upvotes: 0

Related Questions