How to animate a div height based on the content using jQuery

Topic: JavaScript / jQuery« Prev|Next »

Answer: Use the jQuery animate() method

You can use the jQuery animate() method to animate the height of a <div>. In the following example some text content is added dynamically to the DIV box when the button is clicked and the resulting new height is animated using jQuery.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>jQuery Animate a Div Height According to Content</title>
  • <style type="text/css">
  •     .box{
  •         width: 350px;
  •         padding: 20px;
  •         border: 1px solid #ccc;
  •         background: #f2f2f2;
  •     }
  •     .box p{
  •         margin: 0;
  •         padding-top: 20px;
  •     }
  •     .box p:first-child{
  •         padding-top: 0;
  •     }
  • </style>
  • <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Defining the function
  •     function animateHeight(){
  •         var newHeight = $(".box-inner").height();
  •         $(".box").animate({
  •             height: newHeight,
  •         }, 500);
  •     }
  •     $(".load-more").click(function(){
  •         // Setting the initial height of the box
  •         $(".box").height($(".box-inner").height());
  •         
  •         // Appending box with new content and animate the height
  •         var newContent = "<p>Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet non varius gravida nibh. Fusce quam tortor, commodo ac dui quis, bibendum erat.</p>";
  •         $(".box-inner").append(newContent);
  •         animateHeight();
  •     });
  • });
  • </script>
  • </head>
  • <body>
  • <button class="load-more">Load Content</button>
  • <p>Every time you click the above button some content will be added to box and the height of the box is adjusted through animation.</p>
  • <div class="box">
  •     <div class="box-inner">
  •         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  •         Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
  •         dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
  •         ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non
  •         aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.
  •         Vivamus fermentum in arcu in aliquam. Quisque aliquam.
  •         </p>
  •     </div>
  • </div>
  • </body>
  • </html>

Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.