Sidebar menu doesn't collapse on click

Question

The sidebar menu show up when a user clicks on the vertical black border on the left but it is not collapsing when i click on the close button. I want it to close with the same animation with javascript or jquery.

<div id="mySidenav" class="sidenav" onclick="openNav()" style="cursor: pointer;">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Animated Sidenav</h2>

<script>
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
</script>

Demo https://jsfiddle.net/1n6bajmh/

Answer 1

It doesn't work because you have two onclick event handlers registered on nested elements.

When you click on the inner a element to close the menu, the closeNav function is indeed called correctly, but then the click event propagates up in the DOM tree, reaching the parent id with id "mySidenav".

Now, the div also has a registered onclick handler that gets triggered as well, so your openNav function is also called.

You need to prevent the event from propagate up and reach the div, so you can use event.stopPropagation().

Check this out:

 function openNav() { document.getElementById("mySidenav").style.width = "250px"; } function closeNav(event) { event.stopPropagation(); document.getElementById("mySidenav").style.width = "0"; } 

 body { font-family: "Lato", sans-serif; } .sidenav { height: 100%; width: 15px; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; } .sidenav a:hover { color: #f1f1f1; } .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav { padding-top: 15px; } .sidenav a { font-size: 18px; } } 

 <meta name="viewport" content="width=device-width, initial-scale=1"> <div id="mySidenav" class="sidenav" onclick="openNav()" style="cursor: pointer;"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav(event)">&times;</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> <h2>Animated Sidenav</h2> 

I'd recommend you to read more about event bubbling here: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Answer 2

If you change your code in openNav to handle both open and close it will solve the problem.

function openNav() {
  var w = document.getElementById("mySidenav").style.width;
  if(w === "250px"){
    document.getElementById("mySidenav").style.width = '2px';
  }else {
   document.getElementById("mySidenav").style.width = '250px';
  }
}