Réduire et développer Accordéon en même temps en utilisant JQuery (démo)

Question

Je suis coincé sur un accordéon Expand/Collapse en utilisant JQuery. Après que le titre initial est cliqué et qu'il se développe, si vous cliquez sur un autre titre, il effondrera complètement l'ancien titre d'ABORD puis il développera le titre sur lequel vous avez cliqué. Cet effondrement d'abord puis l'expansion de la seconde technique est très distrayant et ce qui devrait arriver est que le titre soit en expansion, il devrait réduire le titre initial. Qu'est-ce que je rate?

Vous pouvez découvrir une démo here

est Ci-dessous tout mon travail >>

Javascript

<script src="http://www.apus.edu/bin/l/y/jquery-1.3.2.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
//<!-- 
$(document).ready(function() 
{ 
    $(".accordian>li.expanded").removeClass("expanded"); 
    $(".accordian>li h2").addClass("jse").click(function() { 
        var doOpen = !$(this).parent().hasClass('expanded'); 
        var openContainers = $(".accordian>li.expanded").length>0; 
        var targetNode = this; 
        if(openContainers) { 
            $(".accordian>li.expanded h2") 
                .parent() 
                    .removeClass('expanded') 
                .end() 
                .nextAll() 
                .slideUp(100,function(){ 
                    if($(".accordian>li.expanded").length==0) performOpen(doOpen,targetNode); 
                }); 
        } 
        else { 
            performOpen(doOpen,targetNode); 
        } 
        // if containers are open, proceed on callback 
        // else proceed immediately 
    }).nextAll().slideUp(100); 
}); 

function performOpen(doOpen,whichNode) { 
    if(doOpen) { 
       $('html,body').animate({scrollTop: $(whichNode).offset().top}, 1000); //target code 
       $(whichNode).nextAll().slideDown(100).parent().addClass('expanded'); 
    } 
} 
//--> 
</script> 

CSS

<style> 
.accordian { 
list-style : none; 
padding : 0px; 
margin : 0px; 
font-size : 12px; 
} 
.accordian li { 
list-style : none; 
padding : 0px; 
margin : 0px; 
} 
.accordian li a:hover { 
text-decoration : underline; 
} 
.accordian li h2 { 
cursor : auto; 
text-decoration : none; 
padding : 0px 0px 4px 22px; 
} 
.accordian li h2.jse { 
background-image : url(http://www.apus.edu/bin/m/p/toggle_arrow.gif); 
background-position : 4px -35px; 
background-repeat : no-repeat; 
} 
.accordian li h2:hover { 
cursor : pointer; 
text-decoration : underline; 
} 
.accordian li li { 
margin-bottom : 5px; 
margin-left : 0px; 
margin-top : 0px; 
padding : 0px; 
} 
.accordian li p { 
display : block; 
padding-top : 0px; 
padding-bottom : 15px; 
padding-left : 10px; 
margin-left : 30px; 
margin-top : 0px; 
} 
.accordian li ul { 
margin-bottom : 30px; 
margin-top : 0px; 
padding-top : 0px; 
padding-left : 0px; 
margin-left : 0px; 
} 
.accordian li.expanded h2.jse { 
background-position : 4px -5px; 
} 
.accordianContainer { 
margin-top : 0px; 
padding-top : 0px; 
} 
.accordianContainer h2 { 
padding : 3px; 
} 
.accordian_nolist { 
list-style : none; 
} 
</style> 

HTML

<table height="120"><tr><td>&nbsp;</td></tr></table> 

<div class="accordianContainer"> 
<ul class="accordian"> 
<li><h2>Title 1 Goes here - Example</h2> 
    <ul><li> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    </li></ul> 

</li> 
</ul> 
</div> 

<div class="accordianContainer"> 
<ul class="accordian"> 
<li><h2>Title 2 Goes here - Example</h2> 
    <ul><li> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    </li></ul> 

</li> 
</ul> 
</div> 

<div class="accordianContainer"> 
<ul class="accordian"> 
<li><h2>Title 3 Goes here - Example</h2> 
    <ul><li> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    </li></ul> 

</li> 
</ul> 
</div> 

<div class="accordianContainer"> 
<ul class="accordian"> 
<li><h2>Title 4 Goes here - Example</h2> 
    <ul><li> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    </li></ul> 
</li> 
</ul> 
</div> 

<div class="accordianContainer"> 
<ul class="accordian"> 
<li><h2>Title 5 Goes here - Example</h2> 
    <ul><li> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    this is where content goes<BR>this is where content goes<BR>this is where content goes<BR> 
    </li></ul> 

</li> 
</ul> 
</div> 

Answer 1

.slideUp(100,function(){ if($(".accordian>li.expanded").length==0) performOpen(doOpen,targetNode); });

Juste là ... vous êtes d'effectuer l'ouverture comme un rappel à la fermeture ... ie. il se déclenche lorsque slideUp est terminée. Youd besoin de retravailler cela afin qu'ils courent en parallèle. Quelque chose le long des lignes de ce qui suit:

$(".accordian>li.expanded h2").parent().removeClass('expanded') 
    .end() 
    .nextAll() 
    .slideUp(100); 

if($(".accordian>li.expanded").length==0) { 
    performOpen(doOpen,targetNode); 
} 

Cela devrait faire en sorte qu'ils le feu à peu près en même temps. De plus ... y a-t-il une raison pour laquelle vous n'utilisez pas le widget accordian de jquery-ui? C'est assez facile à coiffer et il y a des gestionnaires d'événements auxquels vous pouvez vous lier. :-)

Answer 2

Que diriez-vous de animate's queue argument?