I am trying to get a simple effect working in jQuery, and only have a few hours of experience with it, so have a lot to learn.

I managed to get this code working:

    <script type="text/javascript" >
    $(document).ready(function() {
        lastBlock = $("#a1");
        maxWidth = 415;
        minWidth = 75;

        $("ul li a").hover(function() {
          $(lastBlock).animate({ width: minWidth + "px" }, { 
            queue: false, 
            duration: 600 
          });
          $(this).animate({ width: maxWidth + "px" }, { 
            queue: false, 
            duration: 600 
          });
          lastBlock = this;
      });

    });
</script>

Which gives me exactly what I want, a 6 pane horizontal accordion effect. Each pane however has a 75x75 image on the upper left, which is always visible no matter which pane is active (and it is this image that when hovered over caused the pane to open) - what I want to do is for the image on the selected 'pane', I want to drop the top margin down 10px, and then put it back to 0px when a new one is selected, i.e. so the selected panes image is always 10px lower than the other 5 images.

I suspect this should be easy, but not quite grasping the syntax yet.

Thanks.