jQuery Accordion needs to ALWAYS show table in each div

Question

I am using an accordion style menu to toggle the next div area when you click its parent h3 element.

$(document).ready(function() {
    $('div.accordian-content> div').hide();
    $('div.accordian-content> h3').click(function() {
    $(this).next('div').slideToggle('medium')
    .siblings('div:visible').slideUp('medium');
});
});

the code works fine with the following structure.

<div class='accordian-content'>
<h3>Some title</h3>
<div>content to be toggled</div>
</div>

The problem is that I'm trying to use a table in between the h3 and the next div and I want the table to always be shown, but when you put a table in there the parent h3 toggling breaks.

<div class='accordian-content'>
<h3>Covers </h3>
<table id='covers'>Table content </table>
    <div>Ajax content</div>
</div>

Any advice would be greatly appreciated, as I have spent way to much time on this silly thing.

Answer 1

Replace next('div') with nextAll('div') and you should be fine. http://jsfiddle.net/VJCV9/