nested accordion only shows one option i.e. not fully expanding

nested accordion only shows one option i.e. not fully expanding

Hi,

I'm trying to setup a jQuery UI nested accordion for site navigation.

The nested accordion opens/expands showing only one option, while there are two in the child according list.

I cannot figure out what the problem is here. I've tried all the options as clearStyle: true and autoHeight: false, but than the accordion is not working at all.

Can anyone help or is this a known bug ?

this is the code:

jQuery(document).ready(function(){

$("#accordion").accordion({
    active: false,
    header: 'a.head',
    navigation: true,
    event: 'mouseover',
    icons: false,
    fillSpace: true,
    animated: 'bounceslide',
    changestart: function(event, ui) {
            child.accordion("activate", false);
     }
    });

var child = $("#child-accordion").accordion({
    active: false,
    header: 'a.chead',
    navigation: true,
    event: 'mouseover',
    icons: false,
    fillSpace: true,
    animated: 'easeslide'
  });

});

I'm using an <ul> structure for the accordion:

<div id="navaccbox">
<ul id="accordion">
<li class=" first">
<a class="head nav-selected nav-path-selected"  href="/concrete5.4.1.1/">Home</a></li>
<li class=" middle">
<a class="head" href="/concrete5.4.1.1/infrastruktuur/aktiviteiten/"  >Infrastructuur</a>
<ul id="child-accordion">
<li class=" middle">
<a class="chead" href="/concrete5.4.1.1/infrastruktuur/aktiviteiten/"  >Aktiviteiten</a>
<ul>
<li class=" middle"><a href="/concrete5.4.1.1/infrastruktuur/aktiviteiten/bruggen-en-tunnels/"  >Bruggen en tunnels</a></li>
<li class=" middle"><a href="/concrete5.4.1.1/infrastruktuur/aktiviteiten/externe-kwaliteitsborging-ekb/"  >Externe kwaliteitsborging</a></li></ul></li>
<li class=" middle">
<a class="chead" href="/concrete5.4.1.1/infrastruktuur/projekten/"  >Projekten</a></li></ul></li>
<li class=" middle">
<a class="head" href="/concrete5.4.1.1/bouwtechniek/aktiviteiten/"  >Bouwtechniek</a>
<ul>
<li class=" middle"><a href="/concrete5.4.1.1/bouwtechniek/aktiviteiten/"  >Aktiviteiten</a></li>
<li class=" middle"><a href="/concrete5.4.1.1/bouwtechniek/projekten/"  >Projekten</a></li>
<li class=" middle"><a href="/concrete5.4.1.1/bouwtechniek/vergunningen/"  >Vergunningen</a></li>
<li class=" middle"><a href="/concrete5.4.1.1/bouwtechniek/randd/"  >R&D</a></li></ul></li>
<li class=" middle">
<a class="head" href="/concrete5.4.1.1/ventures/aktiviteiten/"  >Ventures</a>
<ul>
<li class=" middle"><a href="/concrete5.4.1.1/ventures/aktiviteiten/"  >Aktiviteiten</a></li>
<li class=" middle"><a href="/concrete5.4.1.1/ventures/deelnemingen/"  >Deelnemingen</a></li></ul></li>
<li class=" middle">
<a class="head" href="/concrete5.4.1.1/diversen/aktiviteiten/"  >Diversen</a>
<ul>
<li class=" last"><a href="/concrete5.4.1.1/diversen/aktiviteiten/"  >Aktiviteiten</a></li></ul></li></ul>
</div>   

thanks