Q:

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

mhmadesk
Save to bookmark
|
2022-05-18
|
  348 
Very Easy
0

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

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this 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>
    .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 src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to highlight alternate table row using jQuery... >>
<< How to remove wrapper element but keep the text co...