wing22yu
January 31, 2023
286 views
0 votes
2 Answers

I have a div expanding to fullscreen on click, and upon doing so a "close" button appears. On click of the close button, I want the div to return to its normal state and the button disappears. Why is the following code not working?

$("#SaveNClose").hide(); // Hide the close button

$('#myDiv').click(function(e) {
  $(this).addClass('fullscreen');
  $("#SaveNClose").show();
});


$(document).ready(function() {
  $("#SaveNClose").click(function() {
    $("#myDiv").removeClass("fullscreen");
    $("#SaveNClose").hide();
  });
});

#SaveNClose {
  border: 1px solid black;
  background-color: red;
  border-radius: 50px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.myDiv.fullscreen {
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  text-align: center;
  align-items: center;
  top: 0;
  left: 0;
  background-color: #799C4B;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="myDiv" id="myDiv">
  <button id="SaveNClose">&times Click to Save and Close</button>
  <div class="row">Main Text</div>
</div>

Tags: jquery

Answers

I’ve modified your code a little bit in order to separate the div which receives the click event and the div which renders full size.

$("#SaveNClose").hide(); // Hide the close button

$('#myDivInner').click(function(e) {
  $('#myDiv').addClass('fullscreen');
  $("#SaveNClose").show();
});

$(document).ready(function() {
  $("#SaveNClose").click(function() {
    $("#myDiv").removeClass("fullscreen");
    $("#SaveNClose").hide();
  });
});

#SaveNClose {
  border: 1px solid black;
  background-color: red;
  border-radius: 50px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.myDiv.fullscreen {
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  text-align: center;
  align-items: center;
  top: 0;
  left: 0;
  background-color: #799C4B;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="myDiv" id="myDiv">
  <button id="SaveNClose">&times Click to Save and Close</button>
  <div class="myDiv" id="myDivInner">
    <div class="row">Main Text</div>
  </div>
</div>

Why is the following code not working?

The cause:

The "close" code is working, unfortunately it’s re-maximising (running the myDiv fullscreen) immediately after closing – so the appearance is that nothing happens.

A little bit of debugging shows what’s happening:

$("#SaveNClose").hide(); // Hide the close button

$('#myDiv').click(function(e) {
  console.log("mydiv click")
  $(this).addClass('fullscreen');
  $("#SaveNClose").show();
});


$(document).ready(function() {
  $("#SaveNClose").click(function() {
    console.log("close click")
    $("#myDiv").removeClass("fullscreen");
    $("#SaveNClose").hide();
  });
});

#SaveNClose {
  border: 1px solid black;
  background-color: red;
  border-radius: 50px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.myDiv.fullscreen {
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  text-align: center;
  align-items: center;
  top: 0;
  left: 0;
  background-color: #799C4B;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="myDiv" id="myDiv">
  <button id="SaveNClose">&times Click to Save and Close</button>
  <div class="row">Main Text</div>
</div>

When you click the close, the close is inside myDiv so myDiv also gets that same click event as click events propagate up to parents.

The Fix

You need to stop the close event from propagating up to the parent div. There’s various ways to do this, the easiest is to add:

return false;

to the end of your event handler. Another is event.stopPropagation() – see jquery stopPropagation

Updated snippet with one line changed:

$("#SaveNClose").hide(); // Hide the close button

$('#myDiv').click( function(e)
  {
  $(this).addClass('fullscreen');
  $("#SaveNClose").show();
  });
$(document).ready( function() 
  {
  $("#SaveNClose").click( function() 
    {
    $("#myDiv").removeClass("fullscreen");
    $("#SaveNClose").hide();
    
    return false;
    });
  });

#SaveNClose
  {
  border           : 1px solid black;
  background-color : red;
  border-radius    : 50px;
  padding-left     : 10px;
  padding-right    : 10px;
  padding-top      : 5px;
  padding-bottom   : 5px;
  }
.myDiv.fullscreen 
  {
  z-index          : 9999;
  width            : 100%;
  height           : 100%;
  position         : fixed;
  text-align       : center;
  align-items      : center;
  top              : 0;
  left             : 0;
  background-color : #799C4B;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="myDiv" id="myDiv">
  <button id="SaveNClose">
    &times Click to Save and Close
  </button>
  <div class="row">
    Main Text
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

jQuery button to remove parent div class, and hide itself simultaneously using hide() not working

Answers

The cause:

The Fix