title: Active class siblings removeClass
body: <p>I have various elements which have the class <code>.folder</code></p>
  
  <p>When I click one I want to add the class <code>active</code> to it and remove the class from any other element.</p>
  
  <p>The problem is removing the class from the others first, its simply not doing it.</p>
  
  <p>Here's what I'm trying:</p>
  
  <pre><code>$('.folder').click(function() {
      $(this).siblings('.folder').removeClass('active'); // remove from all other &lt;SPAN&gt;s
      $(this).addClass('active'); // add onto current
  })
  </code></pre>
  
  <p>Example HTML:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="closed last"&gt;
          &lt;span class="folder" id="16"&gt;More coding&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;  
  &lt;/li&gt;
  &lt;li class="closed collapsable lastCollapsable"&gt;
      &lt;span class="folder active" id="12"&gt;Music&lt;/span&gt;
      &lt;ul style="display: block;" id="browser" class="filetree treeview-famfamfam"&gt;
          &lt;li class="closed collapsable"&gt;
              &lt;span class="folder active" id="13"&gt;Music child&lt;/span&gt;
                  &lt;ul style="display: block;" id="browser" class="filetree treeview-famfamfam"&gt;
                      &lt;li class="closed last"&gt;
                          &lt;span class="folder" id="15"&gt;More music&lt;/span&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
           &lt;/li&gt;
           &lt;li class="closed last"&gt;&lt;span class="folder" id="17"&gt;Another child here&lt;/span&gt; &lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>