使用动画更改div高度onclick

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/

Answer 5

The complete solution:

Both spacer DIV and Margin or Padding on content DIV works but best to still have a spacer DIV.

Responsive design can be then applied to it in your CSS file. This is mutch better as with JAVA the screen would flicker! If you use a grid system there will be a media query part there you need to include your settings.

I use a little spacer on HD screen while its increasing till mobile screen!

Still if you have breadcrumb in header multiple lines can be tricky, so best to have a java but deferred for speed resons. Note that animation is for getting rid of flickering of screen.

This java then would only fire if breadcrumb is very long otherwise single CSS applied via the grid and no flickering at all. Even if java fired its doing its work via an elegant animation

var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;    

if (header_height > spacer_height) {
    $('#header_spacer').animate({height:header_height});
};

Note that I have applied a 5px tolerance margin!

Ho this helps :-)

Answer 6

I know this is old, but if anyone seems to find their way here. @JacobTheDev answer is great and has no jQuery! I have added a little more for use cases where the event is not being assigned at the same point your toggling the css class.

HTML

<div id='item' onclick='handleToggle()'> </div>

JS

handleToggle(event){    
  document.getElementById(event.target.id).classList.toggle('active')
}

CSS

#item {
  height: 20px;
  transition: 1s;
}

.active {
  height: 100px;
}