multiple slide down divs

Question

I'm completely new to jQuery, so I have absolutely no idea what I'm doing.

What I'm trying to create is a slide down menu that fills the full width of the page and is a certain height. I want the content to slide down from underneath the white line down to the top of the green div.

Here's a working preview of what I've got: http://jsfiddle.net/VRe9G/1/

$(".link_1, .content_1").hover(function() {
    $(".content_1").stop(true, true).slideDown(400);
}, function() {
    $(".content_1").stop(true, true).delay(10).slideUp(400);
});

$(".link_2, .content_2").hover(function() {
        $(".content_2").stop(true, true).slideDown(400);
    }, function() {
        $(".content_2").stop(true, true).delay(10).slideUp(400);
    });

$(".link_3, .content_3").hover(function() {
        $(".content_3").stop(true, true).slideDown(400);
    }, function() {
        $(".content_3").stop(true, true).delay(10).slideUp(400);
    });

Like I said, completely new to jQuery so I'm sure there's a more efficient way of using the script than having it three separate times.

It works to an extent, but I can't get the transition to work as I want. This is the effect I want to achieve as you hover on different links http://jsfiddle.net/Fu3xG/1/ rather than the sliding/bouncing it's doing now.

Answer 1

for dynamic hover effect update jquery with:

   $(".hoverme").hover(function(){
       var showdiv = $(this).attr('id'); 
      /* it will select the link which is hovered and then will show the
        corresponding div which we had sync with alt attr */

       $(".hideme").hide();
       $("[class='hideme'][alt='"+showdiv+"']").slideToggle(400);
   });

where your HTML will be:

 <ul>
    <li><div id="link_1" class="hoverme">Link #1</div> </li>
    <li><div id="link_2" class="hoverme">Link #2</div> </li>
    <li><div id="link_3" class="hoverme">Link #3</div> </li>
</ul>

<div alt="link_1" class="hideme">Contents1</div>
<div alt="link_2" class="hideme">Contents2</div>
<div alt="link_3" class="hideme">Contents3</div>

and CSS will be:

  .hoverme
   {
    margin-top: 30px;
    width: 130px;
    height: 53px;
    border: 1px solid #000;
   }

  .hideme
   {
    width: 100%;
    height: 470px;
    background-color: #fff;
    display:none;
    position: relative;
    color: #000;
   }

Answer 2

By not changing much of your code transition can be fixed by adding a class like 'hideme' to all the contents div

    <div class="content_1 hideme">Contents</div>
    <div class="content_2 hideme">Contents</div>
    <div class="content_3 hideme">Contents</div>

and call the hover effects like:

  $(".link_1, .content_1").hover(function() {
     $(".hideme").hide();          //add on all hover effect
     $(".content_1").stop(true, true).slideDown(400);
        }, function() {
           $(".content_1").stop(true, true).delay(10).slideUp(400);
});