title: Hamburger Menu Icon class toggling
body: <p>I have implemented a hamburger icon using font awesome icons fa-bars and fa-close icons. </p>
  
  <pre><code>&lt;div class="btn-group box" id="homeNavMenuBox" onclick="toggleMenu(this)"&gt;
      &lt;button type="button" class="homenavmenu-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"&gt;
          &lt;span class="fa fa-bars fa-2x"&gt;&lt;/span&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  &lt;div aria-expanded="true" class="navbar-collapse navbar-responsive-collapse collapse in"&gt;
      &lt;ul&gt;
          &lt;li&gt; About &lt;/li&gt;
          &lt;li&gt; Info&lt;/li&gt;
          &lt;li&gt; Logout&lt;/li&gt;
       &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>Now, On click of the div, toggling the class to close icon. Clicking on Close icon will bring bars icon back thus giving the feeling of menu and close icons. </p>
  
  <pre><code>function toggleMenu(menuClass) {
      jQuery(menuClass).find('span').toggleClass('fa fa-bars fa fa-close');
  }
  </code></pre>
  
  <p>It works fine with normal clicks, however, when user rapidly clicks on icons, their roles are getting reversed, i.e. when menu gets expanded instead of close icon, I am getting menu icon and vice versa</p>
  
  <p><a href="https://i.stack.imgur.com/8p9a1.png" rel="nofollow noreferrer">Expected and Actual functionalities of Menu Icon</a></p>