Accordion not expanding if only one menu item

[balri]

http://www.dynamicdrive.com/dynamici...daccordion.htm

I am using accordion to expand a list of locations grouped by suburb. It works fine most of the time but if there is only one menu item (ie. suburb), I can't expand it. The mouse point still changes to a hand when hovering over it but that is all. Has anyone experienced this before?

Code:

<script type="text/javascript">
  ddaccordion.init({
    headerclass: "expandable", //Shared CSS class name of headers group that are expandable
    contentclass: "categoryitems", //Shared CSS class name of contents group
    revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
    collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
    defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
    onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
    animatedefault: false, //Should contents open by default be animated into view?
    persiststate: true, //persist state of opened contents within browser session?
    toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
    togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
    animatespeed: "normal", //speed of animation: "fast", "normal", or "slow"
    oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
      //do nothing
    },          
    onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
      //do nothing
    }                   
  })            
</script>

HTML:

    <h3 class="menuheader expandable">Ashgrove (6)</h3>
    <ul class="categoryitems">
      <li><a href="#">Ashgrove Ave (2)</a></li>
      <li><a href="#">Ashgrove Crescent</a></li>
      <li><a href="#">Celia St</a></li>

      <li><a href="#">Mareeba Rd</a></li>
      <li><a href="#">Waterworks Rd</a></li>
    </ul>
    <h3 class="menuheader expandable">Auchenflower</h3>
    <ul class="categoryitems">
      <li><a href="#">Ashgrove Ave (2)</a></li>
      <li><a href="#">Ashgrove Crescent</a></li>

      <li><a href="#">Celia St</a></li>
      <li><a href="#">Mareeba Rd</a></li>
      <li><a href="#">Waterworks Rd</a></li>
    </ul>
    <h3 class="menuheader expandable">Camp Hill</h3>
    <ul class="categoryitems">
      <li><a href="#">Ashgrove Ave (2)</a></li>

      <li><a href="#">Ashgrove Crescent</a></li>
      <li><a href="#">Celia St</a></li>
      <li><a href="#">Mareeba Rd</a></li>
      <li><a href="#">Waterworks Rd</a></li>
    </ul>

[Nile]

Can you post a link to your page that contains the problematic code so we can check it out?

[balri]

No, I can't sorry. That is why I have posted the relevant bits above. If it helps, I am using v1.5.1 of accordion and 1.2.2 of jquery

[Nile]

Can you put it in a zip, and send it?

[ddadmin]

What do you mean by:

It works fine most of the time but if there is only one menu item (ie. suburb), I can't expand it.

Do you mean one header group, or one link within a particular header group? Both ways, it seems to work fine for me using your above sample code.

[balri]

If there is only one header group it doesn't expand. The groups and items are being added dynamically but I have inspected it using Firebug and it all looks ok. The header group has items beneath it.

[balri]

On further investigation, it looks like its not only occurring when there is only one group but also happens whenever the list of groups/items changes (as I said, its done programmatically). I'm guessing that this is something to do with the init not running each time the groups are recreated. Is there an accepted way to do this? I tried putting the init at the bottom of the function that recreates the groups but this didn't seem to work.

Thanks

[balri]

I think the problem here is that the accordion script needs to be re-initialised when the groups and items are recreated. However, looking at the init function it looks like most of the initialisation is in JQuery(document).ready(). Is there any way to re-initialise?

[ddadmin]

I wasn't aware you're dynamically recreating groups and items after the page has loaded. It makes a big difference btw. The code you posted above doesn't show this, and as mentioned, works fine for me during testing. How are you refreshing the groups, via Ajax?

[balri]

Yeah, it gets XML from AJAX and reconstructs the HTML. It looks like the .trigger("evt_accordion") event is not working for some reason afterwards but I can't figure out why. If I put a link to manually expand the item it will execute anything before or after the trigger call but not the trigger itself.