Jquery Akkordeon Effekt

Question

Ich habe ein Problem mit einer jquery Funktion. Mein HTML sieht so aus, ich habe mehrere Elemente wie das folgende.

<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: Ich habe ein neues div um jedes Element hinzugefügt.

Dann habe ich diesen jQuery-Code verwendet, die ich hier gefunden: jQuery toggle - Close all except this

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

ich über die gleiche Wirkung wie in dem Beispiel haben will, wie ein Akkordeon. Aber wenn ich auf <.flyout_hover> nur die <.flyout> innerhalb der letzten <.flyout_hover> wird angezeigt, egal was < .flyout_hover> Ich klicke.

Ich denke, es hat etwas mit dem Index-Ding zu tun, aber ich habe eine harte Zeit, eine Lösung zu finden.

Mit freundlichen Grüßen

Vegar

Answer 1

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

EDIT: Das ist, weil die .flyout keine Geschwister hat innerhalb des enthaltenden .flyout_hover Element. Du musst die Geschwister von .flyout_hover finden und dann ihre Kinder verstecken.

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

Auch vielleicht möchten Sie divs verwenden, anstatt der Spanne für .flyout_hover Elemente?

EDIT 2: Wenn Sie nur immer in seiner Mutter ein .flyout div haben, müssen Sie den Index nicht brauchen, und dann können Sie nur verwenden, um dies:

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

http://jsfiddle.net/e72hk/

EDIT 3: wenn man sie in divs wie in Ihrem editierte HTML-Code wickeln, können Sie dies nur tun, anstatt:

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

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

Answer 2

Ihre HTML-Code wie folgt aussehen annehmen. Demo here

<div class="flyout_hover">Div first </div> 
<div class="flyout_hover">Div second</div> 
<div class="flyout">Menu1 </div> 
<div class="flyout">Menu2 </div> 

.container { 
    display: none; 
}