SOLVED: 'Accordion' style menu problems

SOLVED: 'Accordion' style menu problems

Hello all, first time poster here!

I've just started teaching myself some new web dev. tricks, and having seen JQuery referenced just about everywhere, I thought I'd have a look and see what it can do. Thus far I'm very impressed!

I've built a little sandbox page to test some stuff out, and am trying to create a basic accordion style menu. It all seemed to be working fine, but then I noticed a couple of strange glitches. Any help/pointers would be greatly appreciated.

Glitch 1:
I have three headers on the menu. Clicking down them expands and collapses them as expected. However, after expanding the third menu out, if I then click on either the first or second header, nothing will happen. If I then click again, they expand as usual.

Glitch 2:
This only seems to happen in Firefox, IE doesn't encounter this problem; Following the above (glitch 1), the expanded div from menu one now overlays the header of menu item two. I assume this is due to the fact the divs are of varying sizes, the first one being the largest.

HTML:
<div class="head">la</div>
<div class="cont">
   <span class="nav">one</span>
   <span class="nav">two</span>
   <span class="nav">test</span>
</div>

<div class="head">lala</div>
<div class="cont">
   <span class="nav">test2</span>
</div>

<div class="head">three</div>
<div class="cont">
   <span class="nav">arf</span>
   <span class="nav">mrarf</span>
</div>



JQuery
      var h;
      var cssHeight;
      var target;


      $("div.cont").each(function(){
         $(this).css("height", $(this).height()+"px");
         $(this).hide();
      });



      $(".head").toggle(function() {
         target = $(this).next(".cont");

         target.animate({height: 'show', opacity:'show' }, 'slow');

         target.siblings("div.cont").each(function() {
            h = $(this).height();
            cssHeight = $(this).css('height');
            $(this).animate({height: '1px', opacity:'hide'}, 'slow', function() {
               $(this).hide();
               $(this).height(h);
               $(this).css('height',cssHeight);
            });
         });

      },function(){
         target = $(this).next(".cont");

         h = target.height();
         cssHeight = target.css('height');

         target.animate({height: '1px', opacity:'hide' }, 'slow', function() {
            target.hide();
            target.height(h);
            target.css('height',cssHeight);
         });
      });



Regards