GoldenGonaz GoldenGonaz - 4 months ago 24
CSS Question

Element won't show() according to variable value and if statement

I am trying to make a blue square show if

fullScreenCropStatus = true
and a red square show if
fullScreenCropStatus = false
once the 'Done' button is clicked.

The variable is correct and is showing the correct value, but the blue square does not show when 'Done' is clicked. I tried
and also the current format of setting the display value in css but neither make the blue square appear.

The red square successfully
. I am really baffled on this.

The code is below and this is the JSbin


var fullScreenCrop = false;
var fullScreenCropStatus = false;
$('#cropping--modes').click(function() {
fullScreenCrop = !fullScreenCrop;
console.log("fullScreenCrop = " + fullScreenCrop);
$("#done").click(function() {
fullScreenCropStatus = fullScreenCrop;
console.log("fullScreenCropStatus = " + fullScreenCropStatus);
if (fullScreenCropStatus === true) {
$(".done--title__container").css("display", "none");
$(".done--title__container--fullscreen").css("display", "block");
} else if (fullScreenCropStatus === false) {
$(".done--title__container").css("display", "block");
$(".done--title__container--fullscreen").css("display", "none");


<button id="cropping--modes">Toggle variable (true/false)</button>
<button id="done">Done</button>

<div class="done--title__container">
<div class="done--title__container--fullscreen">


.done--title__container { display:none; width:50px; height:50px; background-color:red; position:relative; }

.done--title__container--fullscreen { display:none;width:50px; height:50px; background-color:blue; position:relative; }

#cropping--modes { display:block; width:200px; height:30px; }

#done { display:block; width:200px; height:30px; }

mjw mjw
Answer Source

Close the div tags and you're fine:

<button id="cropping--modes">Toggle variable (true/false)</button>
<button id="done">Done</button>

<div class="done--title__container"></div>
<div class="done--title__container--fullscreen"></div>