title: Removing active state when toggling between divs
body: <p>I have created multiple top down menu items. When the links are clicked a div slides down to show some content.</p>
  
  <p>What I am trying to do with these links is toggle between them. When one div is opened an active state is added to the link, when it is closed the active state is removed and the div hidden. When you click between the links I have managed to get them to toggle between each other and the active state is added to the div that is opened.</p>
  
  <p>What I cannot achieve is removing the active state and resetting some css. </p>
  
  <p>Here is my Javascript:</p>
  
  <pre><code>//menu toggle
  $(".trigger").click(function() {
  
     var divToToggle = $( $(this).data('target') );
     $(".toggle:visible").not(divToToggle).hide();
     $(".trigger").not(divToToggle).removeClass('active');
     $('.top-nav').css('margin-top', '20px');
  
     divToToggle.slideToggle("fast", "linear");
  
     $(this).toggleClass('active');
     $('.top-nav').css('margin-top', '0px');
  
     return false;
  
  });
  </code></pre>
  
  <p>The <code>.toggle</code> class is on all the divs that are toggled:</p>
  
  <pre><code>    &lt;div class="account-container toggle hide"&gt;&lt;/div&gt;
      &lt;div class="collections-container toggle hide"&gt;&lt;/div&gt;
      &lt;div class="search-container toggle hide"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The <code>.trigger</code> class is on all my links:</p>
  
  <pre><code>    &lt;ul class="top-nav"&gt;
          &lt;li&gt;&lt;a class="hidden-tablet" href=""&gt;home &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="hidden-tablet" href=""&gt;about us &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="hidden-tablet" href=""&gt;where to buy &lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a class="hidden-tablet" href=""&gt;contact us &lt;/a&gt;&lt;/li&gt;
          &lt;li class="tablet-menu visible-tablet"&gt;&lt;a class="tablet-menu trigger" href="" data-target=".tablet-menu-container"&gt;tablet menu&lt;/a&gt;&lt;/li&gt;
          &lt;li class="account"&gt;&lt;a class="account trigger" href="" data-target=".account-container"&gt;account&lt;/a&gt;&lt;/li&gt;
          &lt;li class="collection"&gt;&lt;a class="collection trigger" href="" data-target=".collections-container"&gt;collections&lt;/a&gt;&lt;/li&gt;
          &lt;li class="search"&gt;&lt;a class="search trigger" href="" data-target=".search-container"&gt;search&lt;/a&gt;&lt;/li&gt;
          &lt;li class="basket"&gt;&lt;a class="basket trigger" href="" data-target=".home-basket-container"&gt;basket&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>