How do I get the jQuery UI Accordion to work when I need to put a wrapper around each element?
Example HTML:
<ul>
<li>
<h3><a href="#">header</a></h3>
<div>
Content goes here
</div>
</li>
<li>
<h3><a href="#">header</a></h3>
<div>
Content goes here
</div>
</li>
</ul>
I just can't seem to get it to work.
How do I get the jQuery UI Accordion to work when I need to put a wrapper around each element?
Example HTML:
<ul>
<li>
<h3><a href="#">header</a></h3>
<div>
Content goes here
</div>
</li>
<li>
<h3><a href="#">header</a></h3>
<div>
Content goes here
</div>
</li>
</ul>
I just can't seem to get it to work.
Share Improve this question edited Nov 17, 2010 at 19:23 Peter Mortensen 31.6k22 gold badges110 silver badges133 bronze badges asked Nov 10, 2010 at 21:17 Marty TrenouthMarty Trenouth 3,7526 gold badges36 silver badges43 bronze badges1 Answer
Reset to default 13You cannot make the accordion work with your current markup. Elements must be siblings like this:
<div id="parentAccordionDiv">
<h3><a href="#">header</a></h3>
<div>
Content goes here
</div>
<h3><a href="#">header</a></h3>
<div>
Content goes here
</div>
</div>
I stand corrected. I got an accordion to work fine like this:
<script type="text/javascript">
$(function(){
$('#accordion').accordion();
})
</script>
<ul id="accordion">
<li>
<h3><a href="#">header</a></h3>
<div>
Content goes here
</div>
</li>
<li>
<h3><a href="#">header</a></h3>
<div>
Content goes here
</div>
</li>
</ul>