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> 

Answer 1

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> 

Answer 2

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