title: How to remove focus on a on focus menu on click
body: <p>I have a hamburger menu, when I click the button it activates the on target class on shows the menu. While the menu to open I am not sure how to make it if I click on the menu icon again it collapses the menu. Here is the code I got so far.</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>// my attempt in js to blur navTarget:focus
  $("nav a").click(function() {
    $("nav a").removeClass("navselected");
    $(this).addClass("navselected");
  });
  
  $("#menu").click(function() {
    $("#navTarget:focus").blur();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
    flex: 0 0 100%;
    border-right: 1px solid #386BA8;
    background-color: #386BA8;
  }
  
  nav header {
    padding: 0rem 1rem;
  }
  
  nav a {
    display: block;
    color: #000;
    text-decoration: none;
    padding: 1rem;
    border-top: 1px solid #386BA8;
  }
  
  nav a:first-child {
    padding: 0;
    border-top: none;
  }
  
  .navigation {
    background-color: #6699CC;
    top: 0rem;
    display: none;
  }
  
  .hide {
    display: none;
  }
  
  .bufferspace {
    padding: 0;
  }
  
  #menu {
    background-color: #6699CC;
    display: block;
    position: fixed;
    cursor: pointer;
    top: 0;
    z-index: 10;
  }
  
  #menu i {
    font-size: 2rem;
    padding: 1rem;
  }
  
  #navTarget {
    padding-top: 2.8rem;
  }
  
  #navTarget:target {
    display: block;
  }
  
  nav a:first-child:hover {
    animation: none;
  }
  
  nav a:first-child:hover {
    animation: none;
  }
  
  .navselected:first-child {
    background-color: none;
    border-left: none;
  }
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;nav id="navbar"&gt;
    &lt;a id="menu" href="#navTarget"&gt;
      &lt;i class="fas fa-bars"&gt;&lt;/i&gt;
    &lt;/a&gt;
    &lt;div id="navTarget" class="navigation"&gt;
      &lt;header id="main-title"&gt;
        &lt;a href="#navbar"&gt;
          &lt;h1&gt;HTML&lt;br class="hide" /&gt; Documentation&lt;/h1&gt;
        &lt;/a&gt;
      &lt;/header&gt;
      &lt;a class="nav-link" href="#Introduction"&gt;Introduction&lt;/a&gt;
      &lt;a class="nav-link" href="#Syntax"&gt;Syntax&lt;/a&gt;
      &lt;a class="nav-link" href="#HTML_Page"&gt;HTML Page&lt;/a&gt;
      &lt;a class="nav-link" href="#Common_Tags"&gt;Common Tags&lt;/a&gt;
      &lt;a class="nav-link" href="#HTML5"&gt;HTML5&lt;/a&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codepen.io/peterwebdev/pen/ZRqydm" rel="nofollow noreferrer">Here is the link to my Codepen</a></p>