Accordian not working with all my data..

Question

I am using this according plugin link text the 3rd one down...3: Non-accordion (standard expandable menu) and each li looks like this

<li>
<a href="#">Burswood Dome - Burswood Wa, Australia</a>
        2010-10-04
        <ul class="acitem">
              <br><input id="yes_song1" name="yes" type="radio" value="song[1]" />
              Yes
              <br><input id="no_song1" name="no" type="radio" value="song[1]" />
              No
                <li>master of puppets</li>
</ul>
</li>

Any reason why the accordion is not working because if i use just li with text it works fine...

Answer 1

You need to make sure that LIs are the only children of the UL element. Also, even though you shouldn't have a br element as a direct child of a ul, you should write <br /> instead of <br>.

Answer 2

The reason why the script is breaking is because http://jqueryui.com/demos/accordion/

The markup of your accordion container needs pairs of headers and content panels:

So it should be alternating elements, one for a header, one for content. Mine is a pair of divs, with css class names accHeader and accContent, like thus:

<div class='accHeader'>... blah blah blah ... </div>
<div class='accContent'> ... blah blah ... </div>
<div class='accHeader'>... blah blah blah ... </div>
<div class='accContent'> ... blah blah ... </div>
<div class='accHeader'>... blah blah blah ... </div>
<div class='accContent'> ... blah blah ... </div>

And my accordion works just fine. Also, bear in mind that you can nest whatever you want inside a div. Including <br />s