Help with Collapse and Expand Accordion at same time using JQuery (demo)

Question

I'm stuck on an Expand/Collapse accordion using JQuery.

After the initial headline is clicked and it expands, if you click to another headline it will collapse the former headline completely FIRST then it will expand the headline you clicked. This collapse first then expand second technique is very distracting and what should happen is as the headline is expanding it should collapse the initial headline. What am I missing?

You can experience a demo here: http://media.apus.edu/it/evan-testing/accordion.htm

Below is all my work >>

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); });

Right there... youre performing the opening as a callback to the closing... ie. it fires when slideUp is complete. Youd need to rework this so they run i paralell. Something along the lines of the following:

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

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

That should make it so they fire at roughly the same time.

Additionally... is there a reason why youre not using jquery-ui's accordian widget? Its pretty easy to style and has event handlers you can bind youre own stuff to for all this. :-)

Answer 2

How about animate's queue argument?