Here is my original code:
<div id="accordion">
<h1>Header #1</h1>
<div>
<ul>
<li><a href="#">List item #1</a></li>
</ul>
</div>
<h1>Header #2</h1>
<div>
<ul>
<li><a href="#">List item #1</a></li>
<li><a href="#">List item #2</a></li>
<li><a href="#">List item #3</a></li>
<li><a href="#">List item #4</a></li>
</ul>
</div>
</div>
I tried to remove the inner div
tags, and the code worked just fine. The only difference is that when I surround the ul
tags with div
tags, it creates some margin around them.
Every documentation or tutorial I came across about Jquery UI Accordion, uses div
tags after the h
tags, but since it is working also without them, I ask my self if they are required.
Thank you very much. :)
Just scanned the jQuery UI github source, the accordion seem to work on the class ui-accordion-content
- so it should be OK - as long as you use a block element (p / div / ul etc).
https://github.com/jquery/jquery-ui/search?utf8=✓&q=ui-accordion-content