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.

Solution 1

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

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

Solution 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/

Solution 3

try

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

DEMO

Solution 4

jQuery rules. Check this out.

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

View more solutions

Comments

[JacobTheDev]

This worked, but I decided to do it using a combo of CSS3 and JavaScript.

[Cullub]

@Jacob could you post an answer with what you used? It looks like that might be helpful to future people as well