xto3na/Animate max-height

## Animate max-height
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
	<style>
		.wr {
			position: relative;
			height: 127px;
			overflow: hidden;
			width: 400px;
			border: 3px solid green;
		}
		.txt {

		}
		.btn {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 40px;
			background: red;
			color: #fff;
		}
	</style>
	<div class="wr collapsed-n">
		<div class="txt">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam corporis minus hic, incidunt repellat laborum, excepturi aspernatur vitae voluptatem praesentium eaque eos debitis ex, velit? Cupiditate odit quas vel nam optio ducimus, vero placeat! Quod, ipsum dignissimos. Ratione hic nisi qui obcaecati eligendi, commodi, quisquam quas explicabo repellendus porro? Ad a blanditiis aliquam, cum nulla, quis libero accusamus perferendis nobis, porro nostrum, eveniet dolore. Minima dolor dolorem dignissimos vitae at esse optio vero consequatur doloremque cum modi mollitia labore velit vel hic quis rem nobis odit quae, rerum ullam sit repellendus, maiores corporis. Esse quibusdam necessitatibus, repudiandae consectetur ducimus ullam voluptates, ea, neque officiis veniam enim quae. Ullam ratione animi facilis quibusdam officiis maxime necessitatibus nam quas at, sint dolor aspernatur iure omnis molestias explicabo, ipsam vel, odit expedita praesentium nisi error. Ullam, neque itaque eveniet enim dolore, non provident sed placeat nihil sequi ab! Esse doloribus animi adipisci dignissimos quaerat sed assumenda, magnam iure, cumque, ipsum quidem nulla culpa, facere quam. Id placeat, enim commodi, voluptate molestias, sunt distinctio est ipsa adipisci porro doloribus. Dolores fugit consectetur magni esse amet animi, dolorum unde expedita hic sapiente tempora enim eligendi perspiciatis reiciendis nam, qui libero sint repudiandae quisquam vero minima.
		</div>
		<button type="button" class="btn">button</button>
	</div>
	<script>
		$(".btn").on("click", function (fd) {
      $(".wr").toggleClass("collapsed-n");
      $(".wr").toggleClass("not-collapsed-n");
      if ($(".wr").hasClass("collapsed-n")) {
        $(".wr").animate({height: "127px"}, 500);
      } else {
        var totalHeight = 0;
        $(".wr").children().each(function () {
        	totalHeight += $(this).outerHeight(true);
    		});

    		$(".wr").animate({height:totalHeight}, 500);
      };
      fd.stopPropagation();
    });
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
	</head>
	<body>
	<style>
	.wr {
	position: relative;
	height: 127px;
	overflow: hidden;
	width: 400px;
	border: 3px solid green;
	}
	.txt {

	}
	.btn {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 40px;
	background: red;
	color: #fff;
	}
	</style>
	<div class="wr collapsed-n">
	<div class="txt">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam corporis minus hic, incidunt repellat laborum, excepturi aspernatur vitae voluptatem praesentium eaque eos debitis ex, velit? Cupiditate odit quas vel nam optio ducimus, vero placeat! Quod, ipsum dignissimos. Ratione hic nisi qui obcaecati eligendi, commodi, quisquam quas explicabo repellendus porro? Ad a blanditiis aliquam, cum nulla, quis libero accusamus perferendis nobis, porro nostrum, eveniet dolore. Minima dolor dolorem dignissimos vitae at esse optio vero consequatur doloremque cum modi mollitia labore velit vel hic quis rem nobis odit quae, rerum ullam sit repellendus, maiores corporis. Esse quibusdam necessitatibus, repudiandae consectetur ducimus ullam voluptates, ea, neque officiis veniam enim quae. Ullam ratione animi facilis quibusdam officiis maxime necessitatibus nam quas at, sint dolor aspernatur iure omnis molestias explicabo, ipsam vel, odit expedita praesentium nisi error. Ullam, neque itaque eveniet enim dolore, non provident sed placeat nihil sequi ab! Esse doloribus animi adipisci dignissimos quaerat sed assumenda, magnam iure, cumque, ipsum quidem nulla culpa, facere quam. Id placeat, enim commodi, voluptate molestias, sunt distinctio est ipsa adipisci porro doloribus. Dolores fugit consectetur magni esse amet animi, dolorum unde expedita hic sapiente tempora enim eligendi perspiciatis reiciendis nam, qui libero sint repudiandae quisquam vero minima.
	</div>
	<button type="button" class="btn">button</button>
	</div>
	<script>
	$(".btn").on("click", function (fd) {
	$(".wr").toggleClass("collapsed-n");
	$(".wr").toggleClass("not-collapsed-n");
	if ($(".wr").hasClass("collapsed-n")) {
	$(".wr").animate({height: "127px"}, 500);
	} else {
	var totalHeight = 0;
	$(".wr").children().each(function () {
	totalHeight += $(this).outerHeight(true);
	});

	$(".wr").animate({height:totalHeight}, 500);
	};
	fd.stopPropagation();
	});
	</script>
	</body>
	</html>