title: jQuery remove added class to all elements after not being used anymore
body: <p>I'm trying to remove added class from sibling elements after function is not used anyomore, but without success.</p>
  
  <p>I use a few lines script from Arun P Johny (found <a href="https://stackoverflow.com/questions/21726701/jquery-hide-multiple-divs-onclick">here</a> with fiddle <a href="http://jsfiddle.net/arunpjohny/mdKU4/" rel="nofollow noreferrer">here</a>) and with one added code line that toggles, adds and removes classes, script does the following:</p>
  
  <ul>
  <li>on click each link/tab (.link) show/hide its own div (.div). (All .divs are initially hidden.)</li>
  <li>when second .link is clicked while the first one is active (has visible .div), the visible .div hides and the other one shows</li>
  <li>clicked .link gets class .selected, while others get class .not-selected, so I can target them while at least one link is active (shows .div)</li>
  <li>when .link is clicked again (and .div hides), class .selected is removed</li>
  </ul>
  
  <p>Here is the code:</p>
  
  <pre><code>$(document).ready(function () {
      var $targets = $(".div");
      $(".link").click(function () {
          var $target = $($(this).data("target")).fadeToggle("slow");
          $targets.not($target).hide();
          $(this).toggleClass("selected").removeClass("not-selected").siblings().addClass("not-selected").removeClass("selected");
      });
  });
  </code></pre>
  
  <p>What I cannot make it work is when .link is clicked again (and .div hides), I cannot remove .not-selected class from all other (sibling) .links. When no .div is visible, I want that links do not have class .not-selected, just like they didn't have it before the first .link was clicked.</p>
  
  <p>To visualize: imagine .links are tabs with background color gray. When I click on each tab it becomes yellow (and opens some content), while others become blue. But when I click yellow tab again and content hides, I want all tabs to become gray again (lose blue color).</p>
  
  <p>If I change addClass to toggleClass:</p>
  
  <pre><code>(...).siblings().toggleClass("not-selected").(...) 
  </code></pre>
  
  <p>it doesn't do the trick completely. It works if I click twice on the same link/tab, but when I click one tab after another it still removes .not-selected class, but it shouldn't. I tried</p>
  
  <pre><code>if ($(".div").not(":visible)) {$(".link").removeClass("not-selected");}
  </code></pre>
  
  <p>but that also does not work, even with .lenght === 0. It removes all .not-selected classes whole time, even when one link/tab is selected.</p>
  
  <p>Help? :-)</p>