title: Open/Close Menu Icon Toggle
body: <p>I am trying to figure out a way I can have a toggle for my menu icon at the top of my web app. Basically a user can click the menu icon and it opens up an off-canvas panel and the menu icon turns to an close(x) icon giving the user a choice to close the panel. So far I have got the panels to open the way I want them to but I can't get the icons to change and function properly. Here is what I have so far.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;!-- Required meta tags --&gt;
  
        &lt;link rel="manifest" href="manifest.json"&gt;
        &lt;!-- Tags to allow users to save to phone in fullscreen --&gt;
        &lt;meta name="mobile-web-app-capable" content="yes"&gt;
        &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
        &lt;meta name="apple-mobile-web-app-status-bar-style" content="default"&gt;
        &lt;!-- /// --&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no"&gt;
  
  
      &lt;!-- Bootstrap CSS --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"&gt;
        &lt;link rel="stylesheet" type="text/css" href="css/pwrpg.css"&gt;
  
  
      &lt;title&gt;Hello, world!&lt;/title&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
        &lt;header id="header" class="bg-success"&gt;
  
              &lt;div class="left-head"&gt;
                &lt;div class="navbutton"&gt;&lt;a href="javascript:void(0)" onclick="openNav()" class="menu-icon"&gt;&lt;span class="icon-menu"&gt;&lt;/span&gt;&lt;/a&gt; | &lt;a href="javascript:void(0)" class="closebtn" onclick="closeNav()" class="menu-icon"&gt;Close&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="logo-head"&gt;
               Logo
              &lt;/div&gt;
              &lt;div class="right-head"&gt;
                  &lt;div class="chatbutton"&gt;&lt;a href="javascript:void(0)" onclick="openChat()" class="menu-icon"&gt;Open&lt;/a&gt; | &lt;a href="javascript:void(0)" class="closebtn" onclick="closeChat()" class="menu-icon"&gt;Close&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
  
        &lt;/header&gt;
  &lt;div id="wrapper"&gt;
  
  
  
      &lt;div id="sidebar-left"&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="index.php"&gt;Index&lt;/a&gt;&lt;/li&gt;    
      &lt;li&gt;&lt;a href="page.php"&gt;Page&lt;/a&gt;&lt;/li&gt;       
      &lt;/ul&gt;
  
  
  
      &lt;/div&gt;
          &lt;div id="sidebar-right"&gt;right sidebar&lt;/div&gt;
      &lt;div id="main"&gt;
  
  Page 1 &lt;a href="index.php"&gt;Back&lt;/a&gt;
  
  
     &lt;/div&gt;        
  &lt;/div&gt;
  
  
  
      &lt;!-- Optional JavaScript --&gt;
      &lt;!-- jQuery first, then Popper.js, then Bootstrap JS --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"&gt;&lt;/script&gt;
        &lt;script src="js/pwrpg.js"&gt;&lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#header {position: relative;height:50px;    display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;}
  .left-head, .logo-head, .right-head {    -ms-flex-preferred-size: 0;
      flex-basis: 0;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;}
  .left-head{text-align: left;max-width: 20%;}
  .logo-head{text-align: center;max-width:60%;}
  .right-head{text-align: right;max-width:20%;}
  .navbutton {display:none;}
  .chatbutton {display:none;}
  .navbutton {display:block;padding: 5px 10px;}
      .chatbutton {display:block;padding: 5px 10px;}
  
      .icon-menu {font-size:36px;}
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>/* Main Navigation on Handheld Devices */
  function openNav() {
      document.getElementById("sidebar-left").classList.add("transition-in");
       document.getElementById("sidebar-right").classList.remove("transition-in");
  }
  function closeNav() {
      document.getElementById("sidebar-left").classList.remove("transition-in");   
  }
  
  
  /* Chat Box on Handheld Devices */
  function openChat() {
      document.getElementById("sidebar-right").classList.add("transition-in");
      document.getElementById("sidebar-left").classList.remove("transition-in"); 
  }
  function closeChat() {
      document.getElementById("sidebar-right").classList.remove("transition-in"); 
  }
  
  
  window.addEventListener('click', function(e){
  
      if (document.getElementById('main').contains(e.target)){
      document.getElementById("sidebar-left").classList.remove("transition-in");
          document.getElementById("sidebar-right").classList.remove("transition-in"); 
    } else{
  
    }
  })
  </code></pre>
  
  <p><a href="https://jsfiddle.net/23Lu2k8m/" rel="nofollow noreferrer">https://jsfiddle.net/23Lu2k8m/</a></p>