Extending a div with jquery

Question

I have found this fiddle and replicated to match my code:

http://jsfiddle.net/kapantzak/v5kmoy1p/

which when clicked it extends the div .. is there a way to kind of animate the extension and collapse? So it doesnt happen so quick

$('#click').click(function() {
    $('div.wrapper').find('div').toggleClass('small big');
});

Appreciate the help!

Answer 1

One way of doing it would be to use the max-height property instead of height.

Set your element's max-height to something limited, then set it to a value higher than the element itself.

The transition effect is handled by :

transition: max-height .5s;

Demo :

$('#click').click(function() {
    $('div.wrapper').find('div').toggleClass('small big');
});

.wrapper div{
  transition: max-height .5s;
}

.small {
    max-height: 30px;
    overflow: hidden;
}
.big {
    max-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="small">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<a id="click" href="#">Click...</a>
</div>