Does something like jQuery.toggle(boolean) exist?

Question

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?

score 98 · Accepted Answer · edited May 08 '17 at 15:58

98

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);
});

edited May 08 '17 at 15:58

Funk Forty Niner

74,450
15
68
141

answered Mar 05 '10 at 18:03

jessegavin

74,067
28
136
164

7

Do you know of a version of this function that supports easing/fading/sliding for the transition? This particular method doesn't seem to, and it makes my page jump quite quickly in a way that's more confusing to users than a gentle slide. – Drew Noakes Jan 31 '11 at 13:38
1

Yep it was added in jQuery version 1.4.3. Look at the documentation page (http://api.jquery.com/toggle/#toggle2) you'll see that there are three ways to call toggle() you want to use the following: .toggle( [ duration ], [ easing ], [ callback ] ) – jessegavin Jan 31 '11 at 16:31
7

AFAIK you can't pass a boolean AND an duration/easing, etc. I'd love to stand corrected on however. – Galaxy Apr 04 '12 at 23:35
1

I will agree with the RTFM, only the name, toggle, is just not something you can think of looking for in this situation. – Alexis Wilke Mar 16 '14 at 05:02
The entry that describes `toggle(boolean)` is actually this: http://api.jquery.com/toggle/#toggle-setShown – Arturo Torres Sánchez Feb 23 '15 at 19:10
Well, you saved me from RTFM—I just had to do a websearch. But maybe I'm an idiot too. – Michael Scheper Sep 21 '16 at 21:40
this is awesome. Not found this even in jQuery's documentation. One more point that `.toggleClass` also works like this. Example: `.toggleClass('class-name', condition);` – Ashish Kumar Jul 20 '17 at 08:02
Twelve years later and still helpful :) – Code Slicer Apr 28 '22 at 22:35

score 8 · Answer 2 · answered Mar 05 '10 at 17:38

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/

score 5 · Answer 3 · answered Mar 05 '10 at 17:33

5

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() != "");

answered Mar 05 '10 at 17:33

John Fisher

22,355
2
39
64

score 2 · Answer 4 · answered May 17 '21 at 00:53

2

Syntax 4 $(selector).toggle(display)

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

answered May 17 '21 at 00:53

John

21
1

score 0 · Answer 5 · answered Apr 28 '13 at 16:54

0

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);

answered Apr 28 '13 at 16:54

Yossi Shasho

3,632
31
47

4

The `$.toggle()` function only animates when you pass a duration value as an argument. If you pass a boolean argument, it does *not* animate. So a plugin like this would be superfluous. See here: http://jsfiddle.net/qvdsu/ – jessegavin Apr 29 '13 at 02:15

Does something like jQuery.toggle(boolean) exist?

5 Answers5

Linked

Related