title: jQuery siblings / removeClass "active" just wont work
body: <p>I've been trying to get this arrow toggle script work on my page. I think i miss something simple but I just don't know what is it. Been spending 2 hrs to figure this out. </p>
  
  <p>The script : </p>
  
  <pre><code>$(document).ready(function(){
  
      $(".accordion h3:first").addClass("active");
      $(".accordion a:first").addClass("active");
      $(".accordion p:not(:first)").hide();
  
      $(".accordion h3").click(function() 
      {
          $(this).next("p").slideDown("slow")
                 .siblings("p:visible").slideUp("slow");
      });
  
      $(".accordion a").click(function() 
      {
          $(this).css({background:"url(images/arrowdown.gif) bottom right no-repeat"});
          $(this).siblings("a").removeClass("active");
      });  
  });
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.accordion h3 a {
      padding:20px 0 0 190px; 
      display:block;  
      background:url(images/arrowup.gif) no-repeat bottom right; }
  
  .accordion h3 a:hover { text-decoration:none;   }
  
  .accordion h3 a.active {
      background:url(images/arrowdown.gif) no-repeat bottom right; }
  </code></pre>
  
  <p>Then my HTML :</p>
  
  <pre><code>&lt;div class="accordion"&gt;
      &lt;h3 id="tab1"&gt;
          &lt;a href="#"&gt;Title 1&lt;/a&gt;
      &lt;/h3&gt;
      &lt;p&gt;Description Title 1&lt;/p&gt;
      &lt;h3 id="tab2"&gt;
          &lt;a href="#"&gt;Title 2&lt;/a&gt;
      &lt;/h3&gt;
      &lt;p&gt;Description Title 2&lt;/p&gt;
      &lt;h3 id="tab3"&gt;
          &lt;a href="#"&gt;Title 3&lt;/a&gt;
      &lt;/h3&gt;
      &lt;p&gt;Description Title 3&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So the up &amp; down arrow is INSIDE the "a href" tag and there is a different background image in H3 tag depends on the "tab" ID. I hope that make senses.</p>
  
  <p>Thank you in advance!!</p>