changing the height of containing div onmouseover and onmouseout.

Forum Moderators: open

Message Too Old, No Replies

changing the height of containing div onmouseover and onmouseout.

when mousing over a link I want the div that contains the link and other co

Voltius

9:55 pm on Sep 24, 2010 (gmt 0)

Oh Great Web Master World JavaScript Gurus! I need your help.
I'm customizing open source forum software (Phorum) and I'm almost done but I can't Javascript very well and am stuck.

- each page has 20 threads
- each thread is contained inside a div whose class="threadpreview"
- inside of each "threadpreview" divs are the LINKs to the full thread, and a 500 character preview of the thread right beneath the link
- when the page loads up, I have all the divs' height set to 19px and overflow:hidden so that the preview of the thread is hidden and you can only see the LINK so the divs look "rolled up"
- when a user mouses over the LINK for that thread, the threadpreview div should "unroll" to it's original height to show the content, and onmouseout it should roll back up to 19px to hide the content.
- (I'm not using jquery)

Sorry I'm such a javascript noob. I'm doing what I can to get by.

caffinated

6:51 am on Sep 28, 2010 (gmt 0)

How does this example work for you:

<html>
<head>
<STYLE TYPE="text/css">

</STYLE>

</head>
<body>
<div class="example"></div>
<div class="example"></div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.example').hover(function(){
$(this).css('height','200px')},
function(){$(this).css('height','100px')
});
});

</script>
</body>
</html>[code][/code]

If you want to get funky with the open/close you can learn about the animate option in jQuery: [api.jquery.com ]