Accordion not expanding if only one menu item

[balri]

http://www.dynamicdrive.com/dynamicindex17/ddaccordion.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.