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

Plone's 'All Content' view is such a great way of displaying large amounts of content, but still keeping it organised. Added to that, jQuery accordion makes it even neater, as you don't have to display everything immediately.

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.

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