how to toggle an element using Jquery

Question

I am trying to create a navbar using HTML, CSS and JS. However, I am having a problem trying to toggle the hamburger so when you click the hamburger once the slide menu slide out and when you click the hamburger again it hides the slide menu.

To do this I created two functions and I call the opennav function inline.

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

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

@import url('https://fonts.googleapis.com/css?family=Rubik');
body {
  margin: 0;
  font-family: "Rubik", sans-serif
}

.topnav {
  position: relative;
  overflow: hidden;
  background-color: #122B3C;
  height: 65px;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topnav-right {
  float: right;
}

.hamburger {
  display: inline-block;
  cursor: pointer;
  position: fixed;
  z-index: 999;
}

.home-hamburger {
  position: static;
}

.nav-center {
  position: absolute;
  left: 48%;
  width: 40px;
  margin-left: -20px;
  /* halve the width of the image */
}

.doch {
  position: fixed !important;
  top: 0;
}

.bar1,
.bar2,
.bar3 {
  width: 40px;
  height: 3px;
  background-color: #ffffff;
  margin: 7px 0;
  transition: 0.4s;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #304C58;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #122B3C;
  display: block;
  transition: 0.3s;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

3 @media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="topnav">
  <div class="topnav-centered">
    <a href="#home"><img src="https://via.placeholder.com/350x150" alt=""></a>
  </div>
  <a href="#news">
    <div id="toggle" class="hamburger" onclick="openNav()">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </a>
</div>
<div style="padding-left:16px">
  <h2>Responsive Top Navigation with Centered and Right-Aligned Links</h2>
  <p>Resize the browser window to see the responsive effect.</p>
</div>
<div id="mySidenav" class="sidenav">
  <a href="#">What we do</a>
  <a href="#">How we do it</a>
  <a href="#">Team</a>
  <a href="#">Work for us</a>
  <a href="#">Jobs</a>
  <a href="#">Contact Us</a>
</div>

the Codeine to my problem is https://codepen.io/mrsalami/pen/JadoyR

Answer 1

You don't necesarily need jQuery for this. Your current plain JS logic can easily be amended to make this work as you require.

Firstly, do not use inline event handlers or CSS, both are bad practice. Instead, use unobtrusive event handlers. Then you can create a single event handler which opens and closes the menu by toggling a CSS class on the element which sets the desired width on the element. Try this:

document.getElementById('toggle').addEventListener('click', function() {
  document.getElementById("mySidenav").classList.toggle('open');
});

@import url('https://fonts.googleapis.com/css?family=Rubik');
body {
  margin: 0;
  font-family: "Rubik", sans-serif
}

.topnav {
  position: relative;
  overflow: hidden;
  background-color: #122B3C;
  height: 65px;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

.topnav-centered a {
  float: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.topnav-right {
  float: right;
}

.hamburger {
  display: inline-block;
  cursor: pointer;
  position: fixed;
  z-index: 999;
}

.home-hamburger {
  position: static;
}

.nav-center {
  position: absolute;
  left: 48%;
  width: 40px;
  margin-left: -20px;
  /* halve the width of the image */
}

.doch {
  position: fixed !important;
  top: 0;
}

.bar1,
.bar2,
.bar3 {
  width: 40px;
  height: 3px;
  background-color: #ffffff;
  margin: 7px 0;
  transition: 0.4s;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #304C58;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav.open {
  width: 250px;
}

.sidenav a {
  padding: 8px 8px 8px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #122B3C;
  display: block;
  transition: 0.3s;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

3 @media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

<div class="topnav">
  <div class="topnav-centered">
    <a href="#home"><img src="https://via.placeholder.com/350x150" alt=""></a>
  </div>
  <a href="#news">
    <div id="toggle" class="hamburger">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </a>
</div>
<div style="padding-left:16px">
  <h2>Responsive Top Navigation with Centered and Right-Aligned Links</h2>
  <p>Resize the browser window to see the responsive effect.</p>
</div>
<div id="mySidenav" class="sidenav">
  <a href="#">What we do</a>
  <a href="#">How we do it</a>
  <a href="#">Team</a>
  <a href="#">Work for us</a>
  <a href="#">Jobs</a>
  <a href="#">Contact Us</a>
</div>

If you do want to use jQuery then change the JS to:

$(function() {
  $('#toggle').click(function() {
    $('#mySidenav').toggleClass('open');
  });
});

Answer 2

I used the javascript toggle method

https://codepen.io/gezzasa/pen/aaOaGN

Changed your openNav() to toggleNav()

Target the same element still

function toggleNav() {
    document.getElementById("mySidenav").classList.toggle("navWidth");
}

I also added the class for the width

.navWidth {width: 350px;}