It should be borne in mind that the screen will narrow and the height of the content will change

$('div').click(function() { $(this).addClass('q'); }); 
 div { height: 100px; transition: all 1s; border: 1px black solid; width: 100px; overflow: hidden; } .q { height: auto; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequuntur ut, enim voluptate, optio quia quas neque commodi consequatur quibusdam necessitatibus vitae quam dolorum laboriosam, perspiciatis iste aliquid rem deserunt. </div>

    1 answer 1

     $('div').click(function() { autoHeightAnimate($(this)); }); /* Function to animate height: auto */ function autoHeightAnimate(element) { var curHeight = element.height(), // Get Default Height autoHeight = element.css('height', 'auto').height(); // Get Auto Height element.height(curHeight); // Reset to Default Height element.stop().animate({ height: autoHeight }); // Animate to Auto Height } 
     div { height: 100px; border: 1px black solid; width: 100px; overflow: hidden; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat consequuntur ut, enim voluptate, optio quia quas neque commodi consequatur quibusdam necessitatibus vitae quam dolorum laboriosam, perspiciatis iste aliquid rem deserunt. </div>