CGblog archive page problem with wrapping elements correctly

[seanus]

Ive been working on this archive page for a little while now... ive almost got it the way i want it. Im just having issues with wrapping items.

Here is my code.

Code: Select all

<div id="accordion">
{if isset($archivelist)}
{foreach from=$archivelist item=one}
{if $lastused!=$one.year}
<h3>{$one.year} Archive</h3>
{assign var='lastused' value=$one.year}
{/if}
<ul>
<li><span class="show">
{$one.datestamp|date_format:"%B"} - ({$one.count})</span>
<ul>
{capture assign='theyear'}{$one.datestamp|date_format:"%Y"}{/capture}
{capture assign='themonth'}{$one.datestamp|date_format:"%m"}{/capture}
{CGBlog year="$theyear" month="$themonth" summarytemplate="archive" notcategory="promotions" detailpage="tims-articles"}
</ul>
</li>
</ul>
{/foreach}
{/if}
</div>

Basically what i want to do is have just the years show and then you click on the h3 to expand to show the months and then it expands even further to show the articles. But the very simple jquery script im using relies on the months being wrapped in a div.

Code: Select all

$('#accordion').find('h3, .show').click(function(){
$(this).next().slideToggle();
}).next().hide();

atm when i add opening and closing div tags to where i think it should go it wraps each month in a div... i only want one div wrapped around all the months of the year. so it should look like this below

Code: Select all

<div id="accordion">
        <h3>2011 Archive</h3>
        <div class="wrap">
          <ul>
            <li><span class="show"> December - (2)</span>
              <ul>
                <li>... blah...</li>
                <li>... blah...</li>
              </ul>
            </li>
          </ul>
          <ul>
            <li><span class="show"> November - (3)</span>
              <ul>
                <li>... blah...</li>
                <li>... blah...</li>
                <li>... blah...</li>
              </ul>
            </li>
          </ul>
        </div>
        <h3>2010 Archive</h3>
        <div class="wrap">
          <ul>
            <li><span class="show"> December - (2)</span>
              <ul>
                <li>... blah...</li>
                <li>... blah...</li>
              </ul>
            </li>
          </ul>
          <ul>
            <li><span class="show"> November - (3)</span>
              <ul>
                <li>... blah...</li>
                <li>... blah...</li>
                <li>... blah...</li>
              </ul>
            </li>
          </ul>
        </div>
</div>

Can anyone help me out as im stumped as to what i should do.

Many thanks in advance