Rozwijalne menu

Siedzę dzisiaj nad pewnym problemem cały dzień i powiem, że udało mi się go rozwiązać, ale tak zawiłym sposobem, że na pewno da się dużo prościej :-P

Chcę zrobić rozwijane, boczne, pionowe menu.

Mam w bazie 2 tabele, kategorie i podkategorie:

KATEGORIE:
id_kategorii
nazwa_kategorii

PODKATEGORIE:
id_podkategorii
nazwa_podkategorii
id_kategorii 

Chcę, aby wchodząc na stronę widoczne były tylko główne kategorie (zapewne będą wczytane, ale schowane). Po kliknięciu danej kategorii rozwijają się dla niej podkategorie, a strona się przeładowuje (wyświetlane są dane pozycje, ale tym się nie zajmujemy tu, generalnie chodzi o to, że musi być przeładowanie). Jeżeli klikniemy inną kategorię to stare podkategorie się zwijają, a rozwijają się nowe.

Mam następujący kod smartowy i chce rzeźbić do niego:

<div id="menu_kontyner">
  {foreach from=$a_kategorie item=a_kategoria}
     <div class="menu_kategorie">
        <a href="index.php?akcja=costam&id={$a_kategoria.id_kategorii}" class="rozwin" name="{$a_kategoria.id_kategorii}"> {$a_kategoria.nazwa_kategorii}</a>
        <div class="menu_podkategorie" name="podkategorie{$a_kategoria.id_kategorii}">
            {foreach from=$a_podkategorie item=a_podkategoria}
                {if $a_kategoria.id_kategorii==$a_podkategoria.id_kategorii}
                    <a href="index.php?akcja=costam2&id={$a_podkategoria.id_podkategorii}">- {$a_podkategoria.nazwa_podkategorii}</a>
                {/if}
            {/foreach}
         </div>
     </div>
  {/foreach}
</div>

W jQuery tak kombinowałem:

$('.menu_podkategorie').hide();             //chowaj na starcie wszystkie divy z podkategoriami
$('.rozwin')
  .click(function(){                                 //przy kliknięciu jakiejś głównej kategorii
    var nr = $(this).attr("name");            //wczytaj jej numer
    $('div[name=podkategorie' + nr + ']').show("medium");    //i pokaż tylko tego diva z podkategoriami, którego nazwa odpowiada klikniętej kategorii głównej
    
  });

ale oczywiście to je źle, bo przy przeładowaniu pierwsza linijka kodo będzie zawsze ukrywać to co przed chwilą odkryliśmy.

Poproszę o wskazówki, bądź gotowe rozwiązanie.

$('.rozwin')
  .click(function(){                                 //przy kliknięciu jakiejś głównej kategorii
$('.menu_podkategorie').hide();             //chowaj na starcie wszystkie divy z podkategoriami
    var nr = $(this).attr("name");            //wczytaj jej numer
    $('div[name=podkategorie' + nr + ']').show("medium");    //i pokaż tylko tego diva z podkategoriami, którego nazwa odpowiada klikniętej kategorii głównej
 
  });

 

??
Następnym razem jak chcesz szybką profesjonalną odpowiedź, prezentuj swój problem na http://jsfiddle.net/ -> a tutaj zamieszczaj link do przykładu.