Change button color and background color onclick

Question

I want to create nav-menu collapse, but when I click the menu button it changes to another color and background-color . Using hover and focus it changes the color once it can't retain the old color. So I fix two buttons one on one using display: block and display: none . I need that once button is clicked the button color and background-color is changed again I clicked the color is changed old color.

 function openNav() { document.getElementById("firstbtn").style.display = 'none'; document.getElementById("secondbtn").style.display = 'block'; document.getElementById("navbar").style.height = '200px'; } function closeNav() { document.getElementById("firstbtn").style.display = 'block'; document.getElementById("secondbtn").style.display = 'none'; document.getElementById("navbar").style.height = '0px'; } 

 .nav-bg{ top: 0; left: 0; right: 0; width: 100%; background-color: #0dc5c1; padding-top: 12px; position: fixed; overflow: hidden; } button.nav-btn { float: right; font-size: 24px; border: none; margin-right: 16px; padding: 4px 8px; background-color: #fff; color: #0dc5c1; border-radius: 4px; } button.nav-btn1 { float: right; font-size: 24px; border: none; margin-right: 16px; padding: 4px 8px; background-color: #0dc5c1; color: #ffffff; border-radius: 4px; } .navbar-col{ color: #fff; margin-top: 50px; transition: 0.7s; } .nav-ul{ list-style: none; } li { position: relative; display: block; } a { padding-top: 10px; padding-bottom: 10px; line-height: 25px; font-size: 24px; font-family: "Segoe UI"; position: relative; display: block; padding: 10px 0px; } .d-btn,.l-btn,.t-btn,.s-btn{ background: none; border: none; color: #ffffff; } 

 <nav class="nav-bg container"> <button class="nav-btn" onclick="openNav()" id="firstbtn"><span class="fa fa-bars"></span></button> <button class="nav-btn1" onclick="closeNav()" id="secondbtn" style="display: none"><span class="fa fa-bars"></span></button> <div class="navbar-col collapse" id="navbar" style="height: 0px"> <ul class="nav-ul"> <li><button class="d-btn"><a>Desktop</a></button></li> <li><button class="l-btn"><a>Laptop</a></button></li> <li><button class="t-btn"><a>Tablet</a></button></li> <li><button class="s-btn"><a>Smartphone</a></button></li> </ul> </div> </nav> 

Nav-collapse

Nav-expand

Answer 1

You can implement by using by single button. You need to create two class based on on your requirement put background-color and color in both class. Now on click of button you can check condition by class name. For example

//If you button containe {open} class then you need to assign {close} class else vice versa
if (btn.classList.contains('nav-btn-open')) {
    //Put your logic here.
} else {
    //Put your logic here.
}

DEMO

 function onShowHide(btn) { if (btn.classList.contains('nav-btn-open')) { btn.classList.remove('nav-btn-open'); btn.classList.add('nav-btn-close'); btn.closest('.nav-bg').querySelector('div.navbar-col').style.height = '200px'; } else { btn.classList.remove('nav-btn-close'); btn.classList.add('nav-btn-open'); btn.closest('.nav-bg').querySelector('div.navbar-col').style.height = '0px'; } } 

 .nav-bg { top: 0; left: 0; right: 0; width: 100%; background-color: #0dc5c1; padding-top: 12px; position: fixed; overflow: hidden; } .right-btn { float: right; font-size: 24px; border: none; margin: 0 10px 10px 0; padding: 5px 10px; border-radius: 4px; cursor: pointer; } .nav-btn-open { background-color: #fff; color: #0dc5c1; } .nav-btn-close { background-color: #0dc5c1; color: #ffffff; } .navbar-col { color: #fff; margin-top: 50px; transition: 0.7s; height: 0px; } .nav-ul { list-style: none; } li { position: relative; display: block; } a { padding-top: 10px; padding-bottom: 10px; line-height: 25px; font-size: 24px; font-family: "Segoe UI"; position: relative; display: block; padding: 10px 0px; } .d-btn, .l-btn, .t-btn, .s-btn { background: none; border: none; color: #ffffff; } 

 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <nav class="nav-bg container"> <button class="right-btn nav-btn-open" onclick="onShowHide(this)"><span class="fa fa-bars"></span></button> <div class="navbar-col"> <ul class="nav-ul"> <li><button class="d-btn"><a>Desktop</a></button></li> <li><button class="l-btn"><a>Laptop</a></button></li> <li><button class="t-btn"><a>Tablet</a></button></li> <li><button class="s-btn"><a>Smartphone</a></button></li> </ul> </div> </nav>