How can I toggle between adding and removing the same class in jQuery with an onClick function

Question

I am trying to toggle between adding and removing a class to hide / show a popup window. I am going for something that resembles a computer screen with window browsers so when an icon is clicked a window pops up and so does a tab at the bottom of the navigation bar that you can click to toggle between opening and closing the window.

Here is an example of what I have so far: http://jsfiddle.net/fjmnqx7e/288/

I got the pop-up to close when clicking on the "toggle button" however I can't get it to re-open.

Thank you in advance!

 $('.icon3').on("click", function() { $(".windowframe, .window-content, .navbartabs").addClass("active"); $(".navbartabs").css("display", "inline-block"); }); $(".close").on("click", function() { $(".windowframe, .window-content").removeClass("active"); $(".navbartabs").css("display", "none"); }); $(".navbartabs").on("click", function() { $(".navbartabs").css("display", "inline-block"); }); 

 iframe { width: 100%; height: 100%; padding: 0; margin: 0; border: none; overflow: hidden; display: flex; } .windowframe { /*Hides pop-up when there is no "active" class*/ visibility: hidden; position: absolute; background: #ffffff; border: 3px solid #666666; width: 50%; height: 50%; left: 25%; } .windowframe.active { /*displays pop-up when "active" class is present*/ visibility: visible; text-align: center; } .window-content { /*Hides pop-up content when there is no "active" class */ visibility: hidden; } .window-content.active { /*Shows pop-up content when "active" class is present */ visibility: visible; } .navbartabs { display: none; margin-left: 70px; height: 20px; width: 100px; float: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="draggable" class="icon3"> <div class="icons"> <a href="#"><img src="http://paynomind.us/wp-content/uploads/2018/06/hat-icon-03.png"></a> </div> <div class="iconTXT"> hats </div> </div> <div class="windowframe"> <button class="close"> close </button> <div class="window-content"> <iframe src="paynomind.us"></iframe> </div> </div> <div id="nav bar"> <button class="navbartabs close"> toggle button </button> <div> 

Answer 1

No need to use css. You could use jquery toggleClass() .

If you want to toggle class then you could use toggleClass()

$(".windowframe, .window-content, .navbartabs").toggleClass('active')

Working code

 $('.icon3').on("click", function() { $(".windowframe, .window-content, .navbartabs").toggleClass("active"); $(".navbartabs").css("display", "inline-block"); }); $(".close").on("click", function() { $(".windowframe, .window-content").toggleClass("active"); $(".navbartabs").css("display", "none"); }); $(".navbartabs").on("click", function() { $(".navbartabs").css("display", "inline-block"); }); 

 iframe { width: 100%; height: 100%; padding: 0; margin: 0; border: none; overflow: hidden; display: flex; } .windowframe { /*Hides pop-up when there is no "active" class*/ visibility: hidden; position: absolute; background: #ffffff; border: 3px solid #666666; width: 50%; height: 50%; left: 25%; } .windowframe.active { /*displays pop-up when "active" class is present*/ visibility: visible; text-align: center; } .window-content { /*Hides pop-up content when there is no "active" class */ visibility: hidden; } .window-content.active { /*Shows pop-up content when "active" class is present */ visibility: visible; } .navbartabs { display: none; margin-left: 70px; height: 20px; width: 100px; float: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="draggable" class="icon3"> <div class="icons"> <a href="#"><img src="http://paynomind.us/wp-content/uploads/2018/06/hat-icon-03.png"></a> </div> <div class="iconTXT"> hats </div> </div> <div class="windowframe"> <button class="close"> close </button> <div class="window-content"> <iframe src="paynomind.us"></iframe> </div> </div> <div id="nav bar"> <button class="navbartabs close"> toggle button </button> <div> 

Answer 2

You need to use toggleClass function to add/remove active class.

Here is your code.

 $('.icon3').on("click", function() {
         $(".windowframe, .window-content, .navbartabs").addClass("active");
         $(".navbartabs").css("display", "inline-block");
     });

     $(".close").on("click", function() {
         $(".windowframe, .window-content").removeClass("active");
         $(".navbartabs").css("display", "none");
     });

     $(".navbartabs").on("click", function() {
         $(".windowframe, .window-content").toggleClass('active');
     });

Fiddle

Answer 3

Try This Code

Using toggel Button you can show hide popup

 $('.icon3').on("click", function() { $(".windowframe, .window-content, .navbartabs").addClass("active"); $(".navbartabs").css("display", "inline-block"); }); $(".close").on("click", function() { if ($(".window-content").hasClass('active')) { $(".windowframe, .window-content").removeClass("active"); $(".navbartabs").css("display", "none"); } else { $(".windowframe, .window-content, .navbartabs").addClass("active"); $(".navbartabs").css("display", "inline-block"); } }); $(".navbartabs").on("click", function() { $(".navbartabs").css("display", "inline-block"); }); 

 iframe { width: 100%; height: 100%; padding: 0; margin: 0; border: none; overflow: hidden; display: flex; } .windowframe { /*Hides pop-up when there is no "active" class*/ visibility: hidden; position: absolute; background: #ffffff; border: 3px solid #666666; width: 50%; height: 50%; left: 25%; } .windowframe.active { /*displays pop-up when "active" class is present*/ visibility: visible; text-align: center; } .window-content { /*Hides pop-up content when there is no "active" class */ visibility: hidden; } .window-content.active { /*Shows pop-up content when "active" class is present */ visibility: visible; } .navbartabs { display: none; margin-left: 70px; height: 20px; width: 100px; float: right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="draggable" class="icon3"> <div class="icons"> <a href="#"><img src="http://paynomind.us/wp-content/uploads/2018/06/hat-icon-03.png"></a> </div> <div class="iconTXT"> hats </div> </div> <div class="windowframe"> <button class="close"> close </button> <div class="window-content"> <iframe src="paynomind.us"></iframe> </div> </div> <div id="nav bar"> <button class="navbartabs close"> toggle button </button> <div> 

OR Use toggleClass

$(".windowframe, .window-content").toggleClass('active');

Answer 4

When you click the Toggle Button , make sure if it has the class close . Depending on this class you can then show/hide the windowframe

Plus, you must make sure that the class button triggered when hiding both toggle and windowframe must be .windowframe .close and not .close only, because then when you click the Toggle Button that has the class .close it will trigger this function and hide both Windowframe and Toggle Button

 $('.icon3').on("click", function(){ showWindowframe(1); showToggleBtn(1); }); $(".windowframe .close").on("click", function(){ showWindowframe(0); showToggleBtn(0); }); $(".navbartabs").on("click", function(){ if ($(this).hasClass("close")) { $(this).removeClass("close"); showWindowframe(0); } else { $(this).addClass("close") showWindowframe(1); } }); function showWindowframe(status) { if (status) { $(".windowframe, .window-content").addClass("active"); } else { $(".windowframe, .window-content").removeClass("active"); } } function showToggleBtn(status) { if (status) { $(".navbartabs").css("display", "inline-block").addClass("close"); } else { $(".navbartabs").css("display","none"); } } 

 iframe { width: 100%; height: 100%; padding:0; margin: 0; border: none; overflow: hidden; display: flex; } .windowframe{ /*Hides pop-up when there is no "active" class*/ visibility:hidden; position:absolute; background:#ffffff; border:3px solid #666666; width:50%; height:50%; left:25%; } .windowframe.active{ /*displays pop-up when "active" class is present*/ visibility:visible; text-align:center; } .window-content { /*Hides pop-up content when there is no "active" class */ visibility:hidden; } .window-content.active { /*Shows pop-up content when "active" class is present */ visibility:visible; } .navbartabs { display:none; margin-left:70px; height:20px; width:100px; float:right; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="draggable" class ="icon3"> <div class="icons"> <a href="#"><img src="http://paynomind.us/wp-content/uploads/2018/06/hat-icon-03.png"></a></div> <div class="iconTXT"> hats </div> </div> <div class="windowframe"> <button class="close"> close </button> <div class="window-content"> <iframe src="paynomind.us"></iframe> </div> </div> <div id="nav bar"> <button class="navbartabs close"> toggle button </button> <div>