Custom accordion pannel not working properly

Question

I have this accordion script:

$(document).ready(function(){
$(function(){
  //  Accordion Panels
  $(".accordion span").hide();

  $(".accordion li").click(function(){
      $(this).next(".pane").slideToggle("fast").siblings(".pane:visible").slideUp("fast");
  });
});
});

and this PHP script:

echo "<u>Organizational Chart</u><br/>";
        echo "<div class='accordion'>";
$select_branch=mysql_query("SELECT * FROM branch");
while($result_branch=mysql_fetch_array($select_branch)){
    $branch1=$result_branch[1];
    if($branch1!='TOP'){
        echo "<li>".$branch1."</li>";
        echo "<div class='pane'>";
    }
    $select_department=mysql_query("SELECT * FROM departments");
        while($result_department=mysql_fetch_array($select_department)){
            $department=$result_department[1];
            $parent_department=$result_department[2];
            $select_staff=mysql_query("SELECT * FROM organization WHERE branch='$branch1' AND department='$department'");
                while($result_staff=mysql_fetch_array($select_staff)){
                    $fname=$result_staff[1];
                    $mname=$result_staff[2];
                    $lname=$result_staff[3];
                    $department=$result_staff[4];
                    $branch=$result_staff[5];
                    $position=$result_staff[6];
                    $status=$result_staff[7];
                    $pic=$result_staff[8];
                    echo "
                        <div class='staffDiv'>
                            <img class='staffPic' src='images/upload/".$pic."'/>
                            <div style='clear:both'></div>
                            <div class='staffDetails'>
                                ".$fname." ".$mname." ".$lname."<br/>
                                ".$position."<br/>
                            </div>
                        </div>
                    ";
                }
        }
    if($branch1!='TOP'){
        echo "</div>";
    }
}
        echo "</div>";

when I run the page all the panel is open and when I click one panel, all content will hide and start working properly, how can I fix my code? Did I missed something.

I'm sorry for the long code post, I am hoping that someone can help me with this problem.

Answer 1

Try assigning the active property to be false by default. For it to work, the collapsible must be true.

$( ".accordion" ).accordion({ active: false, collapsible: true });

Refer: http://api.jqueryui.com/accordion/#option-active