Question

I have a problem with a jquery function. My HTML looks like this, I have several elements like the one below.

<div id="design">
 <span class="flyout_hover">click me
  <div class="flyout">
   show me 1
  </div>
 </span>
</div>

<div id="seo">
 <span class="flyout_hover">click me
  <div class="flyout">
   show me 2
  </div>
 </span>
</div>

<div id="mobil">
 <span class="flyout_hover">click me
  <div class="flyout">
   show me 3
  </div>
 </span>
</div>

EDIT: I have added a new div around each element.

Then I have used this jquery code, which I found here: jQuery toggle – Close all except this

$(".flyout_hover").click(function() {
   var index = $(this).index();
    $('.flyout').eq(index).toggle().siblings('.flyout').hide();
});  

I want to have the same effect as in the example above, like an accordion. But when I click on <.flyout_hover> only the <.flyout> inside the last <.flyout_hover> is shown, no matter what <.flyout_hover> I click.

I guess it has something to do with the index thingy, but I have a hard time finding a solution to it.

Best regards

Vegar

Answer 1

$(".flyout_hover").click(function() {
   var index = $(this).index();
   $('.flyout').eq(index).toggle();
   $(this).siblings().children('.flyout').hide();
});

EDIT: This is because the .flyout has no siblings inside the containing .flyout_hover element. You have to find the siblings of .flyout_hover and then hide their children.

Fiddle here: http://jsfiddle.net/3GXk6/5/

Also, maybe you want to use divs instead of span for .flyout_hover elements?

EDIT 2: If you only always have one .flyout div inside its parent, you don’t need the index and then you can just use this:

$(".flyout_hover").click(function() {
   $('.flyout', this).toggle();
   $(this).siblings().children('.flyout').hide();
});

http://jsfiddle.net/e72hk/

EDIT 3: When you wrap them in divs as in your edited HTML code, you can just do this instead:

$(".flyout_hover").click(function() {
    $('.flyout', this).toggle();
    $(this).parent('div').siblings('div').find('.flyout').hide();    
});

http://jsfiddle.net/e72hk/15/