The following snippet will automatically create an accordion style nested unordered list with sections as the top level and section-specific categories as the second level.

The requirements

• mootools with the accordion plugin loaded in the head
• aks_var
• Probably Textpattern 4.2

Categories must have a parent named to correspond to the section you wish to have that category nested under. eg, section: “Animals” might have categories: “mammals”, “birds” and “fish” which would all have the parent category: “Animals-section”

The hover-style accordion (requires mootools, but could easily be modified for jQuery) will automatically collapse all sections, and open just the active section’s categories (via some variable trickiness).

The markup looks like…

• section1
• section2
  • categoryA (child category of “section2-section”)
  • categoryB (child category of “section2-section”)
  • categoryC (child category of “section2-section”)
• section3
  • categoryD (child category of “section3-section”)
  • categoryE (child category of “section3-section”)
  • categoryF (child category of “section3-section”)
• section4

<!-- ..........{   Navs   }............................................................. -->
<txp:variable name="counter" value="0" />
<a id="menu_default" href="/">Home</a>
<div id="nav01">
<txp:section_list class="sections" wraptag="ul" break="">
     <txp:variable name='<txp:section/>' value='<txp:variable name="counter"/>' />
     <txp:aks_var name="counter" calc="+1" /> 
 <li id="menu_<txp:section />" class="handle<txp:if_section name='<txp:section />'> selected</txp:if_section>"><!-- <txp:section/> section =<txp:variable name='<txp:section/>'/> -->
   <txp:section title="1" link="1" /><ul class="categories drawer">
   <txp:category_list wraptag="" break="" class="" parent='<txp:section />-section' exclude='<txp:section />-section'>
   <li id="menu_<txp:category />" class="<txp:if_category name='<txp:category />'>selected</txp:if_category>">
     <a href="/<txp:section/>/<txp:category />"><txp:category title="1" /></a>
   </li>
   </txp:category_list></ul>
 </li>
</txp:section_list>
</div>
<script type="text/javascript">window.addEvent('domready', function() {
  var myAccordion = new Accordion($$('.handle'), $$('ul.drawer'), {
     alwaysHide: true,
     show:<txp:variable name='<txp:section />'/>
  });
  $$('.handle').addEvent('mouseenter', function() { this.fireEvent('click'); });
}); 
</script>

Have fun!