Menu button with a click event stop on third click

Question

While trying to make this left menu bar works, I stock on an issue, the click event on the menu button works fine, when I make a first click the left bar appears, the second click to close it works fine again, but on the third click to open it again the bar doesn't appear, I think this happen because is not a loop, it just stay in that last listener. I was trying to make a switch case but I don't know how, I'm new on javascript.

document.getElementById('menu-ic').addEventListener('click', function(evt) {
 document.getElementById('menu-hidden').style.left = '0';
 document.getElementById('l1').style.cssText = 'background-color: #000000;width:0px;';
 document.getElementById('l2').style.cssText = 'background-color: #000000;width:26px;';
 document.getElementById('l3').style.cssText = 'background-color: #000000;width:0px;';
  if (document.getElementById('menu-hidden').style.left = '0') {
   document.getElementById('menu-ic').addEventListener('click', function(evt) {
    document.getElementById('menu-hidden').style.left = '-300px';
    document.getElementById('l1').style.cssText = 'width:20px;';
    document.getElementById('l2').style.cssText = 'width:24px;';
    document.getElementById('l3').style.cssText = 'width:22px;';
   });
  }
});

#menu-hidden {
  position: absolute;
  width: 300px;
  height: 1200px;
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dbdbdb',GradientType=1 );
  /* IE6-9 fallback on horizontal gradient */
  opacity: 0.98;
  top: -120px;
  left: -300px;
  z-index: 550;
  transition: all 1s ease; }
#menu-hidden ul {
  position: absolute;
  top: 15%; }
#menu-hidden ul li {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 120px;
  float: right;
  list-style: none;
  text-align: right; }
#menu-hidden ul li a {
  font-family: sans-serif;
  color: #2c2c2c;
  font-size: 18px;
  text-transform: uppercase; }
#menu-hidden ul li a:hover {
  color: #d6222f;
  transition: all 0.5s ease; }

button:focus {
  outline: none;
}
nav {
  position: relative;
  display: inline-block;
  float: left; }
#menu-ic {
  background: none;
  border: none;
  position: absolute;
  cursor: pointer;
  width: 30px;
  height: 30px;
  top: 30px;
  left: 30px;
  z-index: 600; }
#menu-ic hr {
  height: 2px;
  background-color: #000;
  position: absolute;
  border: none;
  transition: all 1s ease;
  z-index: 500;
}
#l1 {
  width: 20px;
  top: 0; }
#l2 {
  width: 24px;
  top: 8px; }
#l3 {
  width: 22px;
  top: 16px; }

<div id="menu-hidden" >
  <ul>
    <li><a href="#" class="anchor-scroll active">Retail Registration</a></li>
    <li><a href="#" class="anchor-scroll">Wholesale Registration</a></li>
    <li><a href="#" class="anchor-scroll">Mens Clothing</a></li>
    <li><a href="#" class="anchor-scroll">Women</a></li>
    <li><a href="#" class="anchor-scroll">Private Label</a></li>
    <li><a href="#" class="anchor-scroll">Lookbook</a></li>
    <li><a href="#" class="anchor-scroll">Catalogue</a></li>
    <li><a href="#" class="anchor-scroll">Contact Us</a></li>
  </ul>
</div> 

<nav>
  <button id="menu-ic">
    <hr id="l1">
    <hr id="l2">
    <hr id="l3">
  </button>
</nav>

Alvaro · Accepted Answer · 2017-01-10T21:48:16.630

Instead of assigning a click event inside a click event, create a boolean variable that indicates if the sidebar is opened or not. Then on click apply the corresponding code and change the variable value:

var opened = false;
document.getElementById('menu-ic').addEventListener('click', function(evt) {
  if (opened == true) {
    document.getElementById('menu-hidden').style.left = '-300px';
    document.getElementById('l1').style.cssText = 'width:20px;';
    document.getElementById('l2').style.cssText = 'width:24px;';
    document.getElementById('l3').style.cssText = 'width:22px;';
    opened = false;
  } else {
    document.getElementById('menu-hidden').style.left = '0';
    document.getElementById('l1').style.cssText = 'background-color: #000000;width:0px;';
    document.getElementById('l2').style.cssText = 'background-color: #000000;width:26px;';
    document.getElementById('l3').style.cssText = 'background-color: #000000;width:0px;';
    opened = true;
  }
});

#menu-hidden {
  position: absolute;
  width: 300px;
  height: 1200px;
  background: #ffffff;
  /* Old browsers */
  background: -moz-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, #ffffff 0%, #dbdbdb 37%, #bababa 72%, #dbdbdb 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dbdbdb', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
  opacity: 0.98;
  top: -120px;
  left: -300px;
  z-index: 550;
  transition: all 1s ease;
}
#menu-hidden ul {
  position: absolute;
  top: 15%;
}
#menu-hidden ul li {
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 120px;
  float: right;
  list-style: none;
  text-align: right;
}
#menu-hidden ul li a {
  font-family: sans-serif;
  color: #2c2c2c;
  font-size: 18px;
  text-transform: uppercase;
}
#menu-hidden ul li a:hover {
  color: #d6222f;
  transition: all 0.5s ease;
}
button:focus {
  outline: none;
}
nav {
  position: relative;
  display: inline-block;
  float: left;
}
#menu-ic {
  background: none;
  border: none;
  position: absolute;
  cursor: pointer;
  width: 30px;
  height: 30px;
  top: 30px;
  left: 30px;
  z-index: 600;
}
#menu-ic hr {
  height: 2px;
  background-color: #000;
  position: absolute;
  border: none;
  transition: all 1s ease;
  z-index: 500;
}
#l1 {
  width: 20px;
  top: 0;
}
#l2 {
  width: 24px;
  top: 8px;
}
#l3 {
  width: 22px;
  top: 16px;
}

<div id="menu-hidden">
  <ul>
    <li><a href="#" class="anchor-scroll active">Retail Registration</a>
    </li>
    <li><a href="#" class="anchor-scroll">Wholesale Registration</a>
    </li>
    <li><a href="#" class="anchor-scroll">Mens Clothing</a>
    </li>
    <li><a href="#" class="anchor-scroll">Women</a>
    </li>
    <li><a href="#" class="anchor-scroll">Private Label</a>
    </li>
    <li><a href="#" class="anchor-scroll">Lookbook</a>
    </li>
    <li><a href="#" class="anchor-scroll">Catalogue</a>
    </li>
    <li><a href="#" class="anchor-scroll">Contact Us</a>
    </li>
  </ul>
</div>

<nav>
  <button id="menu-ic">
    <hr id="l1">
    <hr id="l2">
    <hr id="l3">
  </button>
</nav>

can you help me with some other post? I have a problem with an input — Kenny Amaro, Jan 10 '17 at 21:52
please check again this post http://stackoverflow.com/questions/41558976/compatibility-issue-with-input-search-button-and-search-bar I modify it — Kenny Amaro, Jan 10 '17 at 22:39

score 1 · Answer 2 · answered Jan 10 '17 at 21:35

I think your mistake here is: you assign click event inside of the click event for the different states. Instead of doing it, let's define variable isHidden

var isHidden = true;
document.getElementById('menu-ic').addEventListener('click', function(evt) {
  if(isHidden){
      document.getElementById('menu-hidden').style.left = '0';
      document.getElementById('l1').style.cssText = 'background-color: #000000;width:0px;';
      document.getElementById('l2').style.cssText = 'background-color: #000000;width:26px;';
      document.getElementById('l3').style.cssText = 'background-color: #000000;width:0px;';
    }else{
                document.getElementById('menu-hidden').style.left = '-300px';
                document.getElementById('l1').style.cssText = 'width:20px;';
                document.getElementById('l2').style.cssText = 'width:24px;';
                document.getElementById('l3').style.cssText = 'width:22px;';

    }
    isHidden = !isHidden
});

fiddle example here

Menu button with a click event stop on third click

2 Answers2