jQuery toggle function hiding visible element even if parameter is truthy

Question

This question is similar but does not help.

The jQuery docs indicate that the $.toggle function accepts a Boolean parameter:

The second version of the method accepts a Boolean parameter. If this parameter is true, then the matched elements are shown; if false, the elements are hidden.

However, passing a truthy (non-Boolean) value doesn't seem to get recognized. The code below alternates between showing/hiding the red box even though the toggle function is passed a truthy value.

Why doesn't the truthy value work?

var imageURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAK8CAYAAABBSdyWAAAgAElEQVR4Ady9+bMcyXHn6ZWZdbwbaDSAvthNiocoiuRobU2/6P//ZW3X1mZNGo6GktjsE2gAD8c76q7Ktc/X41uZr/DQYLObnNEEUC8y4/Tw8PDw8PCIHPzmt//QRs9tBhFtm0H4g8FgF+vwqqrCv/V6rfh+ul2GP+FhsM387XYQbTuISlVXUdd11";

$(document).ready(function() {
   $(".box").on("click", function() {
     $("#redBox").toggle(imageURL);
     $("#curURL").text(imageURL);     
   });
});

.box {
  position: fixed;
  width: 200px;
  height: 200px;
  background: red;
  cursor: pointer;  
}

#redBox {
  background: red;
}

#blueBox {
  background: blue;
}

#curURL {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blueBox" class="box"></div>
<div id="redBox" class="box"></div>

<div id="curURL"></div>

Codepen Mirror

score 1 · Answer 1 · answered Dec 14 '19 at 23:43

The second version of the method accepts a Boolean parameter.

Yes, and it's a strict Boolean type check. See here: https://github.com/jquery/jquery/blob/master/src/css/showHide.js#L86

If you want to toggle based on whether or not the imageURL is null/undefined, you can force it to evaluate as a boolean expression with the double bang operator !! like this:

$("#redBox").toggle(!!imageURL);

You can read more about "double NOT" here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT

It is possible to use a couple of NOT operators in series to explicitly force the conversion of any value to the corresponding boolean primitive.

score 1 · Accepted Answer · answered Dec 14 '19 at 23:50

As well as using the double not operator (!!) as @MattU suggested - you can also use Boolean(imageURL)..

var imageURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABBoAAAK8CAYAAABBSdyWAAAgAElEQVR4Ady9+bMcyXHn6ZWZdbwbaDSAvthNiocoiuRobU2/6P//ZW3X1mZNGo6GktjsE2gAD8c76q7Ktc/X41uZr/DQYLObnNEEUC8y4/Tw8PDw8PCIHPzmt//QRs9tBhFtm0H4g8FgF+vwqqrCv/V6rfh+ul2GP+FhsM387XYQbTuISlVXUdd11";

$(document).ready(function() {
   $(".box").on("click", function() {
     $("#redBox").toggle(Boolean(imageURL));
     $("#curURL").text(imageURL);     
   });
});

.box {
  position: fixed;
  width: 200px;
  height: 200px;
  background: red;
  cursor: pointer;  
}

#redBox {
  background: red;
}

#blueBox {
  background: blue;
}

#curURL {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blueBox" class="box"></div>
<div id="redBox" class="box"></div>

<div id="curURL"></div>

jQuery toggle function hiding visible element even if parameter is truthy

2 Answers2