Help me optimize the if else in JavaScript (jQuery)

Question

Is it possible to somehow shorten this code:

var i=GetStringFromServer('/url');
if(i){
   $('#Div1').hide();
   $('#Div2').show();
}
else{
   $('#Div1).show();
   $('#Div2).hide();
}

In C# I'd simply do this:

bool smth=GetBool();
_el1.Visible=smth;
_el2.Visible=!smth;

Is it possible to mimick the logic in JavaScript?

UPDATE: Thank you guys for nice answers, I peeked at toggle myself before asking but what confused was the method signature:

toggle(fn1, fn2);

I thought that function expected some tricky callbacks but apparently it's flexible enough to handle both plain booleans and callbacks.

UPDATE2: Thanks to Robert's and Fabien's comments, the true answer was finally found. Toggle will always make elements visible or invisible based on evaluating the argument to bool.

Darin Dimitrov · Accepted Answer · 2009-12-08 11:04:15Z

7

$('#Div1, #Div2').toggle(i);

answered Dec 8, 2009 at 11:04

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Corey Ballou Over a year ago

"Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements). If the switch is false, toggle makes them hidden (using the hide method). If the switch is true, toggle makes them shown (using the show method)."

Eric Lennartsson Over a year ago

As cballou mentions, this will either hide or show BOTH divs and doesn't seem to be what Valentin wants.

Fabien Ménager Over a year ago

This code will show them all, or hide them all like said in the DOM, that's not what is expected.

Fabien Ménager Over a year ago

The switch argument will tell what to do, so if "i" evaluates to true, they will all be shown, whatever the elements' visibility is.

Rob Grant Over a year ago

Valentin, please read the first comment, from the docs (I quote the same in my answer). It explains what toggle actually does if you pass it a boolean value; ie if i is true, Div1 and Div2 are shown; if not, they are both hidden. This answer is wrong.

|

Rob Grant · Accepted Answer · 2009-12-08 11:09:11Z

4

If you give toggle a boolean argument, it will apply that to every matched element. From the docs:

Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements).

So in your case, you want:

$("#Div1").toggle(!i);
$("#Div2").toggle(i);

answered Dec 8, 2009 at 11:09

Rob Grant

7,3704 gold badges44 silver badges63 bronze badges

Comments

Fabien Ménager · Accepted Answer · 2009-12-08 11:05:44Z

2

var i=GetStringFromServer('/url');

$('#Div1').toggle(!i);
$('#Div2').toggle(i);

But you may have problem to get the i var if you do it this way as it looks like you are using Ajax.

answered Dec 8, 2009 at 11:05

Fabien Ménager

140k3 gold badges45 silver badges61 bronze badges

Comments

T.J. Crowder · Accepted Answer · 2009-12-08 11:09:40Z

1

It's probably fine as it is, but you could do this if you like:

var i=GetStringFromServer('/url');
$('#Div1')[i  ? 'hide' : 'show']();
$('#Div2')[!i ? 'hide' : 'show']();

I don't think you get much out of it in terms of space savings or runtime, and it's a lot less clear to future code maintainers.

answered Dec 8, 2009 at 11:09

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

1 Comment

Valentin V Over a year ago

Yes thanks, but in this case I prefer going against readability, since I have huge sections that need to be toggled, which creates rows of uniform code difficult to read

culebrón · Accepted Answer · 2009-12-08 11:08:57Z

0

In addition to the other answers, if you can't toggle, but need to show/hide explicitly:

var divs = ['#div1', '#div2'],
    j = (i ? 1 : 0)
$(divs[1 - j]).show()
$(divs[j]).hide()

answered Dec 8, 2009 at 11:08

culebrón

37k21 gold badges78 silver badges117 bronze badges

Comments

Marko · Accepted Answer · 2009-12-08 11:15:24Z

0

I'm used to do like this:

  if($('#Div1').css("display") == "none")
     {
       $(this).show(); 
     }
     else
     {
       $(this).hide(); 
     }

answered Dec 8, 2009 at 11:15

Marko

11.1k17 gold badges74 silver badges94 bronze badges

Collectives™ on Stack Overflow

Help me optimize the if else in JavaScript (jQuery)

6 Answers 6

7 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related