How do I nest my header object in the jQuery Accordion

Question

I've got a UL list and for reasons of CSS styling, I need to nest the object I wish to use as the header for my accordion inside a div within the LI. Such that:

<ul>
    <li>
        <div>
            <h4>Header</h4>
        </div>
        <p>This is my content</p>
    </li>
    ... other lis...
</ul>

Now, I'm wanting to hook up my accordion:

$(document).ready(function() {
    $('ul').accordion({
        header: '' //What do I put here?
    });
});

When I set the header to h4, it doesn't work, when I use the div, it only works at the edge where the padding in the div reveals it from under the h4. Is there a way of referencing the h4 within the div as the header? I tried 'div>h4' but that doesn't work. I'm sure this is quite simple but I haven't discovered how.

Cheers in advance.

Answer 1

The accordion works by finding your header selector matches then calling a .next() to get the content portion. So for your markup, just use this:

$('ul').accordion({
    header: 'li>div' //.next() will get the <p>
});

I tested this, works fine here.