Using plone's All Content view to create an accordion with jQuery

View our implementation of this solution here.

The problem

The structure of the All Content template doesn't allow me to use the standard jQuery accordion code.

jQuery needs this:

<div id="content-core">
    <h2 class="headline">
    <div class="item">
        <dl>Body stuff</dl>
    </div>
    <h2 class="headline">
    <div class="item">
        <dl>Body stuff</dl>
    </div>
</div>

And I'm stuck with this:

<div id="content-core">
    <div class="item">
        <h2 class="headline">
        <dl>Body stuff</dl>
    </div>
    <div class="item">
        <h2 class="headline">
        <dl>Body stuff</dl>
    </div>
</div>

The accordion needs it in order of title, body, title, body, etc.

The solution

Use js to identify the item to be used as the title of the accordion tab (<h2>), remove it from the wrapping item (<div class="item">), and place it in front of said wrapping item. This will give us the structure we need.

The js we used

<script type="text/javascript" language="javascript">
    jQuery(function($) {
        $("body.template-folder_full_view .item h2").each(function(){
            $(this).parent().before($(this));
        });
    });
</script>

You can get more info on the jQuery accordion here.