Question

I would like to show and hide the objects (divs, texts or btns) according to some conditions.

In C#, we can write like the following to reduce amount of codings:

txtA.visible = (type == "A");
txtB.visible = (type == "B");
txtC.visible = (type == "C");

In JQuery, to show and hide, I use .show() and .hide() methods.
But, I have to write many lines for that simple feature. For eg:

if (type == "A")
   $("#txtA").show();
else
   $("#txtA").hide();

if (type == "B")
   $("#txtB").show();
else
   $("#txtB").hide();

if (type == "C")
   $("#txtC").show();
else
   $("#txtC").hide();

Is there anyway to achieve the same functionality with fewer lines? Thanks.

Answer 1

.toggle(showOrHide) allows for a boolean to show or hide the element.

You could rewrite your example to look like this:

$("#txtA").toggle(type === "A");
$("#txtB").toggle(type === "B");
$("#txtC").toggle(type === "C");

Example on jsfiddle