SlideToggle div over content

I have 2 divs. In each div I have some content and also another div thats by default hidden a开发者_StackOverflownd is relative positioned on top of the content. When I hover over the div I want the hidden div to slide up. What I tried isn't working for me.

code.. Ill just show part of it, since both divs are the same. HTML:

<div class="youtube">
    <h1> Youtube </h1>
    <span></span>
    <div class="yt-desc">
     <p>
        Pellentesque habitant morbi tristique senectus et
        netus et malesuada fames ac turpis egestas.
        Pellentesque habitant morbi tristique senectus et
        netus et malesuada fames ac turpis egestas.
      </p>
    </div><!-- // .yt-desc -->  
  </div> <!-- // .youtube -->

CSS:

Heres the css for one,the .forums is exactly the same. I took out the unneeded css.

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x;  float: left; position: relative; z-index: -1; width: 260px; }
.youtube h1, .forums h1 { text-indent: -9999px; margin: 26px auto; }
.youtube { margin: 0 216px 0 0; }
.youtube h1 { background: url(../images/yt-header.png) no-repeat; height: 36px; margin: 21px; auto; width: 212px; }
.youtube span { background: url(../images/icons/youtube.png) no-repeat; display: block; height: 75px; margin: 26px auto; width: 79px; }

.youtube .yt-desc, .forums .forums-desc {  position: absolute; top: 94px; left: 0px; padding: 5px; display: none; }

yt-desc is what i'm trying to get to slideup. But for some reason its not working.

Ive tried.

$(".youtube").hover(function () {
  $(".yt-desc").slideToggle("fast");
});

Still no luck. Can anybody help? :/ Heres an idea of what i'm trying to get -

If I understand correctly, you want something like this: example

Using display: none doesn't render the element until you "show" it, so hiding away the element with overflow: hidden is probably better.

Here is a nice tutorial on a similar effect

Didn't solve your problem really, hope it helps anyway!

EDIT: Your code with my example:

CSS

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x; position: relative; width: 260px; overflow: hidden;}
.youtube h1, .forums h1 { text-indent: -9999px; margin: 26px auto; }

.youtube { margin: 0 216px 0 0; }
.youtube h1 { background: url(../images/yt-header.png) no-repeat; height: 36px; margin: 21px; auto; width: 212px; }
.youtube span { background: url(../images/icons/youtube.png) no-repeat; display: block; height: 75px; margin: 26px auto; width: 79px; }

.youtube .yt-desc, .forums .forums-desc {  width: 260px; position: absolute; bottom: -200px; padding: 5px;}

JQuery

$(".youtube").hover(  
    function(){            $(this).children("div.yt-desc").stop().animate({bottom: 0}, 500);  
    },  
    function(){              $(this).children("div.yt-desc").stop().animate({bottom: -20}, 500);  
});

Some like this http://jsfiddle.net/ambiguous/ENpsH/3/ should work; I stripped all the extraneous stuff out of your sample and started putting necessary bits back in. The basic idea is to position your sliding <div> way below the container then tuck it right up to the edge when you know how tall the container is; then, you can simply animate the top up and down on hover actions.

$(".youtube").hover(
  function() { $(this).children(".yt-desc").show("fast"); },
  function() { $(this).children(".yt-desc").hide("fast"); }
);

This should work. I hope

I've found the problem. On the CSS file line 43:

.youtube, .forums { background: #3c3c3c url(../images/boxes-bg.jpg) repeat-x; border: 1px solid #3c3c3c; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; float: left; position: relative; z-index: -1; width: 260px; }

Remove the Z-index: -1;

I fixed the javascript just to make it show up on the screen and now you need to fix the values:

  $(".youtube").hover(  
        function(){ 
            $(this).children(".yt-desc").show().animate({top: '+=50',});
        },  
        function(){ 
            $(this).children(".yt-desc").hide().animate({top: '-=50',});
        }
    );