Change div height onclick with animation

Question

I'm trying to make a gallery using divs that change their height when you click on them. Ideally, this would include animation to smoothly expand the div's height. There will be several of each div on each page, so it needs to just expand that section.

It's actually supposed to turn out something like the news section on this page: http://runescape.com/

I'd like to do it with JavaScript/jQuery if possible.

Answer 1

$('div').click(function(){
    $(this).animate({height:'300'})
})

Check working example at http://jsfiddle.net/tJugd/

Answer 2

Here's the code I ended up using:

JS:

document.getElementById("box").addEventListener("click", function() {
    this.classList.toggle("is-active");
});

CSS:

#box {
    background: red;
    height: 100px;
    transition: height 300ms;
    width: 100px;
}

#box.is-active {
    height: 300px;
}

HTML:

<div id="box"></div>

Fiddle:

https://jsfiddle.net/cp7uf8fg/

Answer 3

try

$('div').toggle(function(){
    $(this).animate({'height': '100px'}, 100);
}, function(){
    $(this).animate({'height': '80px'}, 100);
});

DEMO

Answer 4

jQuery rules. Check this out.

http://api.jquery.com/resize/