I'm using jQuery for hover over effects. I plan on expanding it from what it is now but I'm having a issue. The issue is I want to hide some text until you hover over that div and then it will show it. Then once you move to a different div it will hide it again?

This is what I have so far. <http://jsfiddle.net/UDFw7/>

**CSS**

```
.divname {
height: 20px;
width: 300px;
border: 1px solid black;
}

```

**javascript**

```
$('.divname').hover(function() {
$(this).animate({
    height: '40px'
}, 300);
},function() {
$(this).animate({
    height: '20px'
}, 300);
});

```

**HTML**

```
<div class='divname'>Text Here</div>
<div class='divname'>Text Here <br /> Hidden text until hover over</div>
<div class='divname'>Text Here</div>

```