Does something like jQuery.toggle(boolean) exist?

JavascriptJqueryToggle

Javascript Problem Overview


I write something similar to the following code a lot. It basically toggles an element based on some condition.

In the following made-up example, the condition is "If the agree checkbox is checked and the name field isn't empty".

$("button").click(function() {
  if ($("#agree").is(":checked") && $("#name").val() != "" ) {
    $("#mydiv").show();
  } else {
    $("#mydiv").hide();
  }
});

I wish there was some sort of jQuery function that would work like this.

$("button").click(function() {
  var condition = $("#agree").is(":checked") && $("#name").val() != "" );
  $("#mydiv").toggle(condition);
});

Is there something like this out there? Or are there other ways besides the first example to do this in a less if-else-ish way?

Javascript Solutions


Solution 1 - Javascript

Ok, so I am an idiot and need to RTM before I ask questions.

jQuery.toggle() allows you to do this out of the box.

$("button").click(function() {
  var condition = $("#agree").is(":checked") && $("#name").val() != "" );
  $("#mydiv").toggle(condition);
});

Solution 2 - Javascript

First, lets see if I understand what you want to do correctly... You want to look at the state of a checkbox(checked or not) and hide or show a second div based on the status of that value.

Define this style:

.noDisplay {
    display:none;
}

Use this JavaScript:

$("button").click(function() {
  $("#mydiv").toggleClass("noDisplay", $("#name").val() == "");
});

The documentation from jQuery on it can be found here: http://api.jquery.com/toggleClass/

Solution 3 - Javascript

You could write the function yourself.

function toggleIf(element, condition) {
    if (condition) { element.show(); }
    else { element.hide(); }
}

Then use it like this:

toggleIf($("button"), $("#agree").is(":checked") && $("#name").val() != "");

Solution 4 - Javascript

Syntax 4 $(selector).toggle(display)

display true - to show the element. false - to hide the element.

Solution 5 - Javascript

If toggle() is not good for you (e.g. because it animates), you can write a small jQuery plugin, like this:

$.fn.toggleIf = function(showOrHide) {
  return this.each(function() {
    if (showOrHide) {
      return $(this).show();
    } else {
      return $(this).hide();
    }
  });
};

and then use it like this:

$(element).toggleIf(condition);

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjessegavinView Question on Stackoverflow
Solution 1 - JavascriptjessegavinView Answer on Stackoverflow
Solution 2 - JavascriptRichard JuneView Answer on Stackoverflow
Solution 3 - JavascriptJohn FisherView Answer on Stackoverflow
Solution 4 - JavascriptJohnView Answer on Stackoverflow
Solution 5 - JavascriptYossi ShashoView Answer on Stackoverflow