jquery .siblings do not work

Question

Hi i want when the one #box is open the others #box close.

Html:

<div id="main">
    <div id="link">click</div><!--/*div*/-->
    <div id="box">content1</div><!--/*div*/-->
</div><!--/*div*/-->
<div id="main">
    <div id="link">click2</div><!--/*div*/-->
    <div id="box">content2</div><!--/*div*/-->
</div><!--/*div*/-->
<div id="main">
    <div id="link">click3</div><!--/*div*/-->
    <div id="box">content3</div><!--/*div*/-->
</div><!--/*div*/-->

Jquery:

<script type="text/javascript"> 
$(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');
    });
});
</script>

Thanks!

Answer 1

You need to use classes instead of ids. You can only have one unique id per page.

HTML:

<div class="main">
    <div class="link">click</div><!--/*div*/-->
    <div class="box">content1</div><!--/*div*/-->
</div><!--/*div*/-->
<div class="main">
    <div class="link">click2</div><!--/*div*/-->
    <div class="box">content2</div><!--/*div*/-->
</div><!--/*div*/-->
<div class="main">
    <div class="link">click3</div><!--/*div*/-->
    <div class="box">content3</div><!--/*div*/-->
</div><!--/*div*/-->

Jquery:

<script type="text/javascript"> 
$(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');
    });
});
</script>

Answer 2

IDs should only be one per page.

You shouldn't reuse "main".

Rather, do something like this:

<div class="main">
   <div class="link">click</div><!--/*div*/-->
   <div class="box">content1</div><!--/*div*/-->
</div><!--/*div*/-->
<div class="main">
   <div class="link">click2</div><!--/*div*/-->
   <div class="box">content2</div><!--/*div*/-->
</div><!--/*div*/-->
<div class="main">
   <div class="link">click3</div><!--/*div*/-->
   <div class="box">content3</div><!--/*div*/-->
</div><!--/*div*/-->

Then, you would change your javascript like so:

$(document).ready(function(){
 $('.main .box').css('display', 'none')

 $('.main .link').click(function() {
   $(this).next('.box').slideToggle('slow')
   .siblings('.box:visible').css('display', 'none');
 });
});

Remember, you're dealing with the siblings of the .box, so you don't need to specify .main again. You're essentially looking for siblings of main which are called class='box:visible'

I might suggest, that unless you really need to, you probably don't need the main class. Rather, structure your code like so:

<div id='main'>
  <div>
     <div class="link">click</div><!--/*div*/-->
     <div class="box">content1</div><!--/*div*/-->
  </div>
  <div>
     <div class="link">click2</div><!--/*div*/-->
     <div class="box">content2</div><!--/*div*/-->
  </div>
  <div>
     <div class="link">click3</div><!--/*div*/-->
     <div class="box">content3</div><!--/*div*/-->
  </div>
</div>

And then, your javascript (edited) like so:

$(document).ready(function(){
   $('#main .box').css('display', 'none')

  $('#main .link').click(function() {
    // this will work, but the code below is smoother      
    // $('#main .box').css('display', 'none'); 
    $('#main .box').hide('slow'); // hide smoothly
    $(this).next('.box').slideToggle('slow');
  });
}); 

The reason for this is two-fold. One, IDs are faster to find in the DOM and it gives a structure to your document. Because you're not supposed to reuse IDs, you will only have ONE main element on your page.

However, without seeing the rest of your code, I can't guarantee that this will work ( or break ) your layout.