title: jQuery: How to add active selected menu class?
body: <p>I have trouble with active class with this menu.</p>
  
  <p><img src="https://i.stack.imgur.com/3ey7G.png" alt="enter image description here"></p>
  
  <p>As you can see here, now active class is on all orders tab.</p>
  
  <p>I want to active this this on each tab when i click on it with removing past tab's class.</p>
  
  <p>HTML for this menu-</p>
  
  <pre><code>&lt;ul id="mainSideMenu" class="nav nav-list nav-side" &gt;
      &lt;li class="accordion-group"&gt;
          &lt;div class="accordion-heading active "&gt;
              &lt;a href="#accDash" id="AllOrders" data-parent="#mainSideMenu"  data-toggle="collapse" class="accordion-toggle "&gt;
                  &lt;span class="item-icon fontello-icon-monitor "&gt;&lt;/span&gt;&lt;i class="chevron fontello-icon-right-open-3"&gt;&lt;/i&gt;
                  All Orders
              &lt;/a&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here is active class-</p>
  
  <pre><code>.nav-side .accordion-group &gt; .active {
      background: url("../img/background/body-bg-02.jpg") repeat scroll 0 0;
  }
  </code></pre>
  
  <p>With jQuery i tried-</p>
  
  <pre><code>$(function(){
      $(".accordion-group").click(function(){
          $(".accordion-group").removeClass('.active').addClass('.active');
          $(this).addClass('.active');
      });
  });
  </code></pre>
  
  <p>That was not happening</p>
  
  <p>This is happening live here-
  <a href="http://themeforest.net/item/boo-admin-responsive-template/full_screen_preview/3489498" rel="nofollow noreferrer" >Boo admin template</a></p>