How to make whenever i press button it turns from transparent to white and press again to turn it back from white to transparent?

Question

#white1{
    background-color: white;
}

#mainNav {
    background-color: #ffffff00;
  /*background-color: #212529;*/

}

jquery

     $(document).ready(function(){    
  $(".navbar-toggler").click(function(){
  if ($("#mainNav").css("background-color") != $("#white1").css("background-color")){
    $("#mainNav").css("background-color", "white");
    }else{
  $("#mainNav").css("background-color", "#ffffff00");
  }
  });
});

html

i want the standard nav bar to be transparent, whenever i click on "list" button the navbar the list opens and background turns into white and when to click on button "list" again to close the list i want the navbar to turn transparent again

but the problem is when i press on the buttons once it goes from transparent to white and no matter how many i press again it stays white

user_4101210 · Answer

Use toggleClass. The background-color is blue when it's clicked, transparent when it isn't.

$(document).ready(function() {
  $(".navbar-toggler").click(function() {
      $("#mainNav").toggleClass("white1");
  });
});

#mainNav {
  transition: background .5s ease-in;
  background: rgba(0, 0, 0, 0.0);
}

.white1 {
  background-color: blue !important;
  transition: background .5s ease-out;
}

How to make whenever i press button it turns from transparent to white and press again to turn it back from white to transparent?

1 Answers