CSS - Transitions - max height

by Ben Clayton

HTML

<button class="but1">Small Window</button>
<button class="but2">Medium Window</button>
<button class="but3">Fit Text</button>

<div class="box">
    <div class="inner">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed euismod velit, sit amet tincidunt elit. Nunc tempor purus lacus, sit amet condimentum neque suscipit id. Aenean efficitur massa pharetra justo luctus, vel eleifend neque molestie. Nullam sed dapibus tortor. Vivamus sit amet rutrum lectus. Donec accumsan pellentesque tincidunt. Mauris porttitor justo eget libero dapibus pretium. Nunc augue felis, convallis vel tortor id, molestie iaculis urna. Donec bibendum nisl vitae ullamcorper auctor. Mauris elit nulla, accumsan ac tortor eu, lacinia rutrum dui. Cras volutpat sed ligula vitae bibendum. Nam nunc risus, tristique eget lacinia sed, malesuada ut ligula. Vestibulum laoreet nibh et elit cursus laoreet. Cras consectetur metus dolor, et malesuada mauris tempor in.</div>
</div>

CSS

.box {
    border:1px solid red;
    padding:10px;
    position:absolute;
    top:50px;
    width:140px;
    font-size:12px;
    overflow:hidden;
    /* height:500px; */
 
	/* Set our transitions up. */
	-webkit-transition: max-height 0.8s;
	-moz-transition: max-height 0.8s;
	transition: max-height 0.8s;

}

JavaScript

$('.but1').on('click',function(){
    $('.box').css("max-height","140px");
    console.log($('.inner').height());
    
});

$('.but2').on('click',function(){
   $('.box').css("max-height","240px");
    console.log($('.inner').height());
});

$('.but3').on('click',function(){
   $('.box').css("max-height",$('.inner').height()+"px");
    console.log($('.inner').height());
});