Question

I have encountered noumerous ways of expanding elements on webpages, for example divs with javascript and jquery. I would like to know what is the best and easiest way of doing this when we look at performance and so on.

In my example i have got a new site that i am building and on the front page a news section. The news items should be in a specific height, say 250px and the width is that of the container (using 960 grid css).

I have got this layout.

<div class="grid_10 news">
   <article></article>
   <article></article>
   <article></article>
   <article></article>
</div>

The article contains ofc information, metadata and so on but also a “read more” link on the right side that should expand the article to its full height.

Right now, i have no specific height or css to the article (except display: block). So what would you guys use for technique and how would you do?

Cheers.

Answer 1

You could set the height to auto, if you never know the new upcoming height.
So if the article is the parent of your read more-button/-link you could do the following:

$(".your_read_more_button").parent().css('height', 'auto');

That’s not directly animatable though, so if you are looking for smooth transitions, you would either have to clone it and get the actually displayed height, then animate the original, or use slideUp() and slideDown() and change the height in between.

If you know the height before AND after expanding then you can do the following css3 transitions:

.news article
{
   -moz-transition: height 1s ease-in-out;
   -webkit-transition: height 1s ease-in-out;
   -o-transition: height 1s ease-in-out;
   transition: height 1s ease-in-out;
}

.expanded
{
   height: 250px;
}

or you simply use jQuery animate:

$('article').stop(true,true).animate({height: 250px}, 400);

That will only change from 1 height to the other, unlike .toggle(), which makes the element invisible for a short moment, which i personally find more likely to disturb the pages overall impression during its animation