<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>CSS3 animate height from/to 0 || fixed value to/from auto</h1>
<button class="trigger">Click to show Line one</button><p class="to-animate"> Line one: a buntch of string here a buntch of string a buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate">Line two: some otsome other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. her stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate"> Line one: a buntch of string here a buntch of string a buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate">Line two: some otsome other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. her stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate"> Line one: a buntch of string here a buntch of string a buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate">Line two: some otsome other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. her stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate"> Line one: a buntch of string here a buntch of string a buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate">Line two: some otsome other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. her stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate"> Line one: a buntch of string here a buntch of string a buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate">Line two: some otsome other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. her stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate"> Line one: a buntch of string here a buntch of string a buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate">Line two: some otsome other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. her stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate"> Line one: a buntch of string here a buntch of string a buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate">Line two: some otsome other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. her stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate"> Line one: a buntch of string here a buntch of string a buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate">Line two: some otsome other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. her stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate"> Line one: a buntch of string here a buntch of string a buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of stringa buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here a buntch of string here </p>
<hr />
<button class="trigger">Click to show Line one</button><p class="to-animate">Line two: some otsome other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. her stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. some other stuff. </p>
<hr />
</body>
</html>
// Add your javascript here
// referred to http://n12v.com/css-transition-to-from-auto/
$(function(){
var $target = $('.to-animate');
// for each target, store its auto (hAuto) and default height (h0)
// value with getComputedStyle
// note that, getComputedStyle is only supported in ie9+
// for older browser, try currentStyle instead,
// referring to http://www.quirksmode.org/dom/w3c_css.html
$target.each(function(){
var $this = $(this);
var h0 = getComputedStyle($this[0]).height;
$this[0].style.height = 'auto';
// different from offsetHeight property,
// getComputedStyle doesn't trigger a new repaint
// so event we set element.style.height to auto
// the page doesn't get changed at this time
var hAuto = getComputedStyle($this[0]).height;
$this[0].style.height = h0;
$this.data('h0', h0);
$this.data('hAuto', hAuto)
})
$('.trigger').click(function(){
// on click, switch between auto computed value and default value
var $this = $(this);
var $myTarget = $this.next('.to-animate');
if (!$myTarget.data('toAuto')) {
$myTarget.css('height', $myTarget.data('hAuto'));
$myTarget.data('toAuto', true);
} else {
$myTarget.css('height',$myTarget.data('h0'));
$myTarget.data('toAuto', false);
}
});
});
/* Put your css in here */
h1 {
color: red;
}
.to-animate {
background:#f8f8f8;
transition: all 500ms ease-out;
-webkit-transition: all 500ms ease-out;
overflow:hidden;
height:0;
}