How do I nest my header object in the jQuery Accordion

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.

From stackoverflow

• 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.

  BenAlabaster : It seems to work okay if you're using the click event, but not if you're using the mouseover event.

  Nick Craver : @BenAlabaster - This is working here for me in Firefox, Chrome and IE, what browser are you seeing problems in? `$('ul').accordion({ header: 'li>div', event: 'mouseover' });`