nissoh · July 7, 2013 10:47
diff --git a/jsbin.ukubed.css b/jsbin.ukubed.css
 .slideFade {
 	position: relative;
 	height: 0;
 	opacity: 0;
 	overflow: hidden;
 	@include transition(height .35s ease);
 }
 .slideFade.in {
  opacity: 1;
  height: auto;
 }


 .transitions {
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
 }


 body {
    font-family:Arial;
    line-height: 3ex;
 }
 code {
    display: inline-block;
    background: #fafafa;
    padding: 0 1ex;
 }
 #toggle {
    display:block;
    padding:10px;
    margin:10px auto;
    text-align:center;
    width:30ex;
 }
 #content {
    overflow:hidden;
    margin:10px;
    border:1px solid #666;
    background:#efefef;
    opacity:1;
      padding:10px;
    overflow:auto;
 }
 * {
  box-sizing: border-box;
 }
diff --git a/jsbin.ukubed.html b/jsbin.ukubed.html
 <!DOCTYPE html>
 <html>
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
 <meta charset=utf-8 />
 <title>JS Bin</title>
 </head>
 <body>
 <div id="content" class="open">

  <h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
        <p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
        <p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
        <p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>

 </div>

 <br />

 <button id="toggle">Challenge Accepted!</button>
 </body>
 </html>
diff --git a/jsbin.ukubed.js b/jsbin.ukubed.js
 var content = $('#content');

 // css transition callback
 content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
    if(content.hasClass('open')){
        content.css('max-height', 9999); // try setting this to 'none'... I dare you!
    }
 });

 $('#toggle').on('click', function(e){
    content.toggleClass('open closed');
    content.contentHeight = content.outerHeight();
    
    if(content.hasClass('closed')){
        
        // disable transitions & set max-height to content height
        content.removeClass('transitions').css('max-height', content.contentHeight);
        setTimeout(function(){
            
            // enable & start transition
            content.addClass('transitions').css({
                'max-height': 0,
                'opacity': 0
            });
            
        }, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
        // chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason
        
    }else if(content.hasClass('open')){
        
        contentHeight = content[0].scrollHeight; // if closed, add inner height to
        console.log(contentHeight)
        content.css({
            'max-height': contentHeight,
            'opacity': 1
        });
        
    }
 });
	.slideFade {
	position: relative;
	height: 0;
	opacity: 0;
	overflow: hidden;
	@include transition(height .35s ease);
	}
	.slideFade.in {
	opacity: 1;
	height: auto;
	}


	.transitions {
	transition: all 0.5s ease-in-out;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	}


	body {
	font-family:Arial;
	line-height: 3ex;
	}
	code {
	display: inline-block;
	background: #fafafa;
	padding: 0 1ex;
	}
	#toggle {
	display:block;
	padding:10px;
	margin:10px auto;
	text-align:center;
	width:30ex;
	}
	#content {
	overflow:hidden;
	margin:10px;
	border:1px solid #666;
	background:#efefef;
	opacity:1;
	padding:10px;
	overflow:auto;
	}
	* {
	box-sizing: border-box;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div id="content" class="open">

	<h3>Smooth CSS Transitions Between <code>height: 0</code> and <code>height: auto</code></h3>
	<p>A clever workaround is to use <code>max-height</code> instead of <code>height</code>, and set it to something bigger than your content. Problem is the browser uses this value to calculate transition duration. So if you set it to <code>max-height: 1000px</code> but the content is only 100px high, the animation will be 10x too fast.</p>
	<p>Another option is to measure the content height with JS and transition to that fixed value, but then you have to keep track of the content and manually resize it if it changes.</p>
	<p>This solution is a hybrid of the two - transition to the measured content height, then set it to <code>max-height: 9999px</code> after the transition for fluid content sizing.</p>

	</div>

	<br />

	<button id="toggle">Challenge Accepted!</button>
	</body>
	</html>
	var content = $('#content');

	// css transition callback
	content.on('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function(e){
	if(content.hasClass('open')){
	content.css('max-height', 9999); // try setting this to 'none'... I dare you!
	}
	});

	$('#toggle').on('click', function(e){
	content.toggleClass('open closed');
	content.contentHeight = content.outerHeight();

	if(content.hasClass('closed')){

	// disable transitions & set max-height to content height
	content.removeClass('transitions').css('max-height', content.contentHeight);
	setTimeout(function(){

	// enable & start transition
	content.addClass('transitions').css({
	'max-height': 0,
	'opacity': 0
	});

	}, 10); // 10ms timeout is the secret ingredient for disabling/enabling transitions
	// chrome only needs 1ms but FF needs ~10ms or it chokes on the first animation for some reason

	}else if(content.hasClass('open')){

	contentHeight = content[0].scrollHeight; // if closed, add inner height to
	console.log(contentHeight)
	content.css({
	'max-height': contentHeight,
	'opacity': 1
	});

	}
	});