CSS popout menus / jquery collapse divs

Match or replace CSS pop-out code to match smarty code that generates xml below. <div id="menu"> <ul> <#loop:rootsection#> <#if:[login to view URL]:eq:rootsection.sectionid#> <li><h2><a href="{[login to view URL]}">{[login to view URL]} →</a></h2> <#else#> <li><h2><a href="{[login to view URL]}">{[login to view URL]}</a></h2> <#/if#> <!-- first level sub-sections --> <#if:[login to view URL]:neq:0#> <!-- <#if:[login to view URL]:eq:rootsection.sectionid#> --> <ul> <#loop:rootsection.subsections#> <#if:[login to view URL]:eq:rootsection.subsections.sectionid#> <li><a href="{[login to view URL]}">{[login to view URL]} →</a></li> <#else#> <li><a href="{[login to view URL]}">{[login to view URL]} </a></li> <#/if#> <#/loop#> </ul> <!-- <#/if#> --> <#/if#> </li> <!-- /first level sub-sections --> <#/loop#> </ul> </div> A great bonus if you can provide jquery code that collapses elements with the same div ID elsewhere on the template :)