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>