Thanks, it worked like a charm.
Here is what I ended up doing:
<!-- ### In the <head> ### -->
<style type="text/css">
#area{margin:0 auto 5px; padding:0 5px 5px; height:75px;
overflow:hidden; border:1px solid #000; position:relative; width:
600px;}
#area h2, #area p{margin:0; padding:0 0 10px;}
#area span{position:absolute; top:0; right:0; color:#000;
background:#ffc; padding:0 5px; border:1px solid #000; border-width:0
0 1px 1px; font-style:italic; font-size:0.8em;}
</style>
<!-- ### In the <head> ### -->
<script language="JavaScript" type="text/javascript" src="js/libraries/
jquery-1.1.2/jquery.js"></script>
<script type="text/javascript">/* <![CDATA[ */
$(document).ready(function(){// start jquery code
$("#area p"|"span").toggle(
function(){
$("#area").animate({height:250},500,function(){
$(this).css({overflow:"auto",background:"#ffc"});
$("span").fadeOut();
});
},function(){
$("#area").animate({height:75},500,function(){
$(this).css({overflow:"hidden",background:"#fff"});
$("span").fadeIn();
});
}
);
});// end jquery code
/* ]]> */</script>
<!-- ### In the <body> ### -->
<div id="area"><span>Click Anywhere To Read More...</span>
<h2>Lorem ipsum dolor...</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis
ligula lorem, consequat eget, tristique nec, auctor quis, purus.
Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra
malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec
quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla
quam, in condimentum augue lorem non tellus. Pellentesque id arcu non
sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan,
enim nibh elementum orci, ut volutpat eros sapien nec sapien.
Suspendisse neque arcu, ultrices commodo, pellentesque sit amet,
ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris
laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at,
lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque
tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam
metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam
posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam
metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi
vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac,
rutrum ac, lectus.</p>
<p>[...]</p>
<p>[...]</p>
<p>[...]</p>
</div>
On Jun 26, 9:38 am, "Glen Lipka" <[EMAIL PROTECTED]> wrote:
> Use the toggle function, but on the inside of it use the animate, not the
> slideToggle stuff.
>
> $("p").toggle(function(){
>
> $(this).animate({
> height: 50
>
> }, 500);
> },function(){
>
> $(this).animate({
> height: 250
>
> }, 500);
> });
>
> totally untested, but this should help get you started.
> You can even get the css attribute of the minheight and maxheight and
> animate to those as variables.
> This puts the control into the CSS where it should be.
>
> Glen
>
> On 6/26/07, [EMAIL PROTECTED] <[EMAIL PROTECTED]> wrote:
>
>
>
> > Hi,
>
> > I'm a bit new to using javascript so please pardon my "newbie-ness".
>
> > I'm looking to toggle a div from a minimum height to a maximum height
> > and back with a click event (e.g., 250px to 500px and back). Has
> > anybody else been able to achieve this? How would I write this code?
>
> > Caveat, the larger size (500px) div should have an overflow:auto
> > applied to it to allow for lengthly content.
>
> > My goal is to show a small ad (250px height) initially and then on a
> > click, fade out the ad, expand the area, then fade in the content.
> > Then the reverse on click again.
>
> > Suggestions?
>
> > Thanks in advance.
>
> > Matthew
