title: w3-sidebar hamburger toggle
body: <p>I am implementing the w3-sidebar from:
  <a href="https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over" rel="nofollow noreferrer">https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over</a></p>
  
  <p>The code uses a "hanburger" to open the side menu and a "Close X" menu item to close it again.</p>
  
  <p>I would like to use the same "hanburger" icon to toggle both the open and close action. So the hanburger is always visible I have added:</p>
  
  <pre><code>.w3-sidebar {
    margin-top: 42px;
  }
  </code></pre>
  
  <p>The code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function w3_open() {
    document.getElementById("mySidebar").style.display = "block";
  }
  
  function w3_close() {
    document.getElementById("mySidebar").style.display = "none";
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;W3.CSS&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!-- Sidebar --&gt;
      &lt;div class="w3-sidebar w3-bar-block w3-border-right" style="display:none" id="mySidebar"&gt;
        &lt;button onclick="w3_close()" class="w3-bar-item w3-large"&gt;Close &amp;times;&lt;/button&gt;
        &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 1&lt;/a&gt;
        &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 2&lt;/a&gt;
        &lt;a href="#" class="w3-bar-item w3-button"&gt;Link 3&lt;/a&gt;
      &lt;/div&gt;
  
      &lt;!-- Page Content --&gt;
      &lt;div class="w3-teal"&gt;
        &lt;button class="w3-button w3-teal w3-xlarge" onclick="w3_open()"&gt;☰&lt;/button&gt;
        &lt;div class="w3-container"&gt;
          &lt;h1&gt;My Page&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;img src="img_car.jpg" alt="Car" style="width:100%"&gt;
  
      &lt;div class="w3-container"&gt;
        &lt;p&gt;This sidebar is hidden by default, (style="display:none")&lt;/p&gt;
        &lt;p&gt;You must click on the "hamburger" icon (top left) to open it.&lt;/p&gt;
        &lt;p&gt;The sidebar will hide a part of the page content.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>