jquery .siblings do not work
<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>
