Animate div with max-height using CSS and jQuery

by Simon Dau

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="container" class="limited">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget purus libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut convallis est vitae quam laoreet, quis eleifend tellus congue. Integer justo enim, placerat sed bibendum nec, accumsan vel lacus. Donec lacinia sodales metus. Vivamus faucibus odio metus, vitae auctor arcu vestibulum quis. Sed vitae mi non neque pulvinar laoreet ut sit amet sapien. 

Nam lacinia augue at diam euismod, nec sagittis est imperdiet. Duis et turpis maximus, rhoncus leo condimentum, lobortis magna. Nunc efficitur posuere odio, vel consequat ipsum porttitor sed. Fusce finibus diam vel ipsum ullamcorper aliquet. Suspendisse potenti. Pellentesque hendrerit lacinia purus, quis commodo risus tincidunt interdum. Etiam faucibus libero quam, convallis auctor nunc rutrum ut. Aliquam nec lacus a nunc gravida tristique. Cras sed magna a ipsum dignissim semper vel non ligula. Aliquam et nisl purus. Aenean nulla metus, laoreet in sem fringilla, placerat hendrerit velit.</div>
<button id="extend">show all</button>
<div id="container2" class="limited">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
<button id="extend2">show all</button>

CSS

#container,
#container2{
	width:500px;
	margin:10px auto;
	height:auto;
	line-height:20px;
	overflow:hidden;	
	-webkit-transition: max-height .5s linear;
    -moz-transition: max-height .5s linear;
    transition: max-height .5s linear;	
}
#container.limited,
#container2.limited{
	max-height:60px;	
  border-bottom:1px solid #ccc;
}
#extend,
#extend2{
	display:block;
	margin:auto;	
}

JavaScript

$(document).ready(function(e) {
	$("#extend").click(function(){
		var c = $("#container");
		if(c.hasClass("limited")){
			var h = c.prop('scrollHeight');
			c.removeClass("limited").css({'max-height':h});
		}else{
			c.removeAttr("style").addClass("limited");
		}
	});
	$("#extend2").click(function(){
		var c = $("#container2");
		if(c.hasClass("limited")){
			var h = c.prop('scrollHeight');
			c.removeClass("limited").css({'max-height':h});
		}else{
			c.removeAttr("style").addClass("limited");
		}
	});
  var b = $("#container2");
  if(b.prop('offsetHeight') >= b.prop('scrollHeight')){
			b.removeClass("limited");
      $("#extend2").fadeOut();
		}
});