jQuery menu animation

Question

Hi Stackoverflow,

I'm building a website where I'm using jQuery to animate a horizontal tabbed menu. What I want to achieve can be seen here:

/ link removed /

If you hover/mouseover the "Link 1" tab, you'll see that a white div is expanding. Each of the tab menu items are a styled li-tag. What I want to do is, that when you hover/mouseover i.e. the "Link 2" tab, the white div contracts and then expands again with content related to "Link 2" instead of "Link 1". Also, the "Link 1" tab should be expanded by default (i.e. when you just entered the site)

Does any of you jQuery ninjas out there know how to do this? What I currently have is this:

<script type="text/javascript">
$(document).ready(function(){
var $div = $('#divtest');
    var height = $div.height();
   $div.hide().css({ height : 0 });

    $('#forside').hover(function () {
        if ($div.is(':visible')) {
             $div.animate({ height: 0 }, { duration: 200, complete: function () {
                 $div.hide();
           } });
        } else {                       
  $div.show().animate({ height : height }, { duration: 200 });
        }

       return false;
    });


  });
</script>

Do I need to have 4 different div's which expands/contracts for every mouseover?

If i'm not being clear about what my problem is, please say so and I'll try to elaborate :)

Thanks in advance!

Answer 1

I found the solution to this. However, it felt more annoying than it actually felt like a nice-to-have feature ;)

The solution I found is here: http://www.noupe.com/tutorial/drop-down-menu-jquery-css.html

The slideUp and slideDown did it for me!