title: jquery .siblings do not work
body: <p>Hi i want when the one #box is open the others #box close.</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="main"&gt;
      &lt;div id="link"&gt;click&lt;/div&gt;&lt;!--/*div*/--&gt;
      &lt;div id="box"&gt;content1&lt;/div&gt;&lt;!--/*div*/--&gt;
  &lt;/div&gt;&lt;!--/*div*/--&gt;
  &lt;div id="main"&gt;
      &lt;div id="link"&gt;click2&lt;/div&gt;&lt;!--/*div*/--&gt;
      &lt;div id="box"&gt;content2&lt;/div&gt;&lt;!--/*div*/--&gt;
  &lt;/div&gt;&lt;!--/*div*/--&gt;
  &lt;div id="main"&gt;
      &lt;div id="link"&gt;click3&lt;/div&gt;&lt;!--/*div*/--&gt;
      &lt;div id="box"&gt;content3&lt;/div&gt;&lt;!--/*div*/--&gt;
  &lt;/div&gt;&lt;!--/*div*/--&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt; 
  $(document).ready(function(){
  $('#main #box').css('display', 'none')
  
  $('#main #link').click(function() {
      $(this).next('#main #box').slideToggle('slow')
      .siblings('#main #box:visible').css('display', 'none');
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks!</p>