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>