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>
