I have a <div> on my site (news stories) that needs to start as (e.g.) 100px and then when you click a link (read more) it should grow to full height.

I am currently doing this using jQuery, the height is set to 100px and then when clicked this function fires:

$(".expand").click(function(event) { event.preventDefault(); $(".news").toggleClass('highlight', 'slow'); });

It toggles the class "highlight" which sets the height to "auto".

All very well, but it does not animate - it just jumps from small to big and back again instantly.

Is there any way I can animate this? I have searched the web to no avail. I cannot use toggle() or slideUp() because it needs a starting height.


2 answers

This was chosen as the best answer

I think you can add a child div for your content inside the "#news" div, and set the height of your "#news" div to 100px, and overflow to hidden. Then on click you can have this fire:

$("#expand").click(function(event) { event.preventDefault(); $("#news").animate( { height: $('#content').css('height') }, 1500 ); });

Make sure you use IDs as unique indentifiers, not classes.

Answered over 8 years ago by Maidomax

The code you quoted above did not work, I had to modify it to this:

$("#expand").click(function(event) { event.preventDefault(); $("#news").animate( { height: $('#content').css('height') }, 1500 ); });

(Note $('#content').css('height') instead of $("#content").attr("height"))

Otherwise, thank you! It worked a treat. I have edited your post and marked it as the best answer.

Answered over 8 years ago by Shaun Robinson