How can I Animate an Element to its natural height using jQuery [duplicate]

Asked 2/9, 2009 at 19:43 Answered 2/6, 2014 at 12:44

I'm trying to get an element to animate to its "natural" height - i.e. the height it would be if it had height: auto;.

I've come up with this:

var currentHeight = $this.height();
$this.css('height', 'auto');
var height = $this.height();
$this.css('height', currentHeight + 'px');

$this.animate({'height': height});

Is there a better way to do this? It feels like a bit of a hack.

Edit: Here's a complete script to play with for anyone that wants to test.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
    <head>
        <title>jQuery</title>
        <style type="text/css">
            p { overflow: hidden; background-color: red; border: 1px solid black; }
            .closed { height: 1px; }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
        <script type="text/javascript">
        $().ready(function()
        {
            $('div').click(function()
            {
                $('p').each(function()
                {
                    var $this = $(this);

                    if ($this.hasClass('closed'))
                    {
                        var currentHeight = $this.height();
                        $this.css('height', 'auto');
                        var height = $this.height();
                        $this.css('height', currentHeight + 'px');

                        $this.animate({'height': height});
                    }
                    else
                    {
                        $this.animate({'height': 1});
                    }

                    $this.toggleClass('closed');
                });
            });
        });
        </script>
    </head>

    <body>

        <div>Click Me</div>
        <p>Hello - I started open</p>
        <p class="closed">Hello - I started closed</p>

    </body>
</html>

Syzran answered 2/9, 2009 at 19:43 Comment(1)

dont forget to var the $this variable Greg – Looksee 2/9, 2009 at 20:4

I could suggest an equally-hackish solution...Clone the element, position it out of view, and get its height...then delete it and animate your original.

That aside, you could also use $.slideUp() and $.slideDown():

$this.hasClass('closed') ? $(this).slideDown() : $(this).slideUp() ;

If you need to keep a 1px line, you can apply that with a parent element:

<div style='border-top:1px solid #333333'>
  <div class='toggleMe'>Hello World</div>
</div>

And apply the slidingUp/Down on the .toggleMe div.

Paniagua answered 2/9, 2009 at 19:44 Comment(8)

Sounds like it would work but I'm not sure it would be an improvement :) What I have works but I'm new to jQuery so I'm thinking there must be a non-hacky way – Syzran 2/9, 2009 at 19:49

Any reason you decided not to go with $.slideUp() and $.slideDown()? – Paniagua 2/9, 2009 at 19:53

I need it to stop at 1px heigh and I don't think that's possible with those functions (could be wrong though) – Syzran 2/9, 2009 at 19:56

Also it needs to be able to start in a closed or open state, before jQuery starts running, if that matters – Syzran 2/9, 2009 at 19:57

Can the 1px height be simulated by an element around the toggled-element? <div style="border-top:1px"><div class="toggle"></div></div>? – Paniagua 2/9, 2009 at 19:57

I've gone with adding a wrapper div - simple, works well and lets me use slide instead of animate... thanks – Syzran 2/9, 2009 at 20:39

There is a naturalHeight attribute for images in firefox, this article describes an internet explorer workaround: arunprasad.wordpress.com/2008/08/26/… – Edwardedwardian 29/10, 2009 at 14:19

.slideToggle() also exists. But many of us are avoiding slideXxx() because it has some issues with smoothness. Physically animating height seems the best solution, provided you can figure out what the natural height is. – Weinman 26/11, 2010 at 12:40

I permit myself to answer this thread, even if it's been answered a long time ago, cuz it just helped me.

In fact, i don't understand the first answer : why opening a half-closed element to get its height, and then closing it again ?

At the beginning, you hide the element so that just a part of it appears, right ? The best way (i believe) to do this is onready, with javascript. So, when you hide the element onready, just save the orig height in a var, so you don't have to hide(onready)-show-save height-hide to be able to toggle the elements visibility.

Look at what i did, it works perfectly :

$(document).ready(function(){
var origHeight = $("#foo").css('height');
$("#foo").css({"height" : "80px"});
$("#foo .toggle").bind("click", function(event){ toggleFoo(event, lastSearchesMidHeight); });
});

Here, when you call your toggle function, you know what is your original element height without wanking around.

I wrote it fast, hoping it could help someone in the future.

Annelieseannelise answered 29/9, 2010 at 20:2 Comment(0)

the easiest solution I found was to simply wrap the content element with a div that is limited in height and set to overflow:hidden. This truncates the inner content element to the height of the wrapping div. when the user clicks, hovers, etc. to show the full height of the content element - simply animate the wrapping div to the height of the inner content div.

Deviant answered 21/7, 2011 at 14:12 Comment(1)

I love this solution, really clean, flexible and an excellent way of avoiding having to do some js calculation that could break depending on content. Top awesomeness Tobias!! – Amanita 13/6, 2016 at 15:44

I could suggest an equally-hackish solution...Clone the element, position it out of view, and get its height...then delete it and animate your original.

That aside, you could also use $.slideUp() and $.slideDown():

$this.hasClass('closed') ? $(this).slideDown() : $(this).slideUp() ;

If you need to keep a 1px line, you can apply that with a parent element:

<div style='border-top:1px solid #333333'>
  <div class='toggleMe'>Hello World</div>
</div>

And apply the slidingUp/Down on the .toggleMe div.

Paniagua answered 2/9, 2009 at 19:44 Comment(8)

Sounds like it would work but I'm not sure it would be an improvement :) What I have works but I'm new to jQuery so I'm thinking there must be a non-hacky way – Syzran 2/9, 2009 at 19:49

Any reason you decided not to go with $.slideUp() and $.slideDown()? – Paniagua 2/9, 2009 at 19:53

I need it to stop at 1px heigh and I don't think that's possible with those functions (could be wrong though) – Syzran 2/9, 2009 at 19:56

Also it needs to be able to start in a closed or open state, before jQuery starts running, if that matters – Syzran 2/9, 2009 at 19:57

Can the 1px height be simulated by an element around the toggled-element? <div style="border-top:1px"><div class="toggle"></div></div>? – Paniagua 2/9, 2009 at 19:57

I've gone with adding a wrapper div - simple, works well and lets me use slide instead of animate... thanks – Syzran 2/9, 2009 at 20:39

There is a naturalHeight attribute for images in firefox, this article describes an internet explorer workaround: arunprasad.wordpress.com/2008/08/26/… – Edwardedwardian 29/10, 2009 at 14:19

I'd also like to chime in on this old thread, if I may, in case my solution helps anyone. My specific situation is this: I have some div's that are set with a max-height value that limits them to three lines tall, and when the user mouseovers them I want them to expand to their natural height; and when the mouse cursor leaves the div, I want them to shrink back down to the clipped, max-three-lines-tall height. I need to use the CSS max-height property, rather than height, because I have some div's that contain only one or two lines of text and I don't want them unnecessarily tall.

I tried many of the solutions in this thread, and the one that worked for me was the 'hackish suggestion' involving cloned elements suggested by Jonathan Sampson. I translated his idea into the following code. Please feel free to suggest improvements.

The functions are delegated to a parent element to handle div's created via an Ajax call. The div.overflow_expandable class has the following declaration: { max-height: 5em; overflow: hidden; }

$('#results').delegate('div.overflow_expandable', 'mouseenter', function() {
    var $this = $(this);

    // Close any other open divs
    $('#results div.overflow_expandable').not($(this)).trigger('mouseleave');

    // We need to convert the div's current natural height (which is less than
    // or equal to its CSS max-height) to be a defined CSS 'height' property, 
    // which can then animate; and we unset max-height so that it doesn't 
    // prevent the div from growing taller.
    if (!$this.data('originalHeight')) {
        $this.data('originalHeight', $this.height());
        $this.data('originalMaxHeight', parseInt($this.css('max-height')));
        $this.css({ 'max-height':'none',
            height: $this.data('originalHeight') });
    }

    // Now slide out if the div is at its original height 
    // (i.e. in 'closed' state) and if its original height was equal to
    // its original 'max-height' (so when closed, it had overflow clipped)
    if ($this.height() == $this.data('originalHeight') && 
        $this.data('originalMaxHeight') == $this.data('originalHeight')) {
        // To figure out the new height, clone the original element and set 
        // its height to auto, then measure the cloned element's new height;
        // then animate our div to that height
        var $clone = $this.clone().css({ height: 'auto', position: 'absolute', 
            zIndex: '-9999', left: '-9999px', width: $this.width() })
            .appendTo($this);
        $this.animate({ height: $clone.height() }, 'slow');
        $clone.detach();
    }
}).delegate('div.overflow_expandable', 'mouseleave', function() {
    var $this = $(this);
    // If the div has 'originalHeight' defined (it's been opened before) and 
    // if it's current height is greater than 'originalHeight' (it's open 
    // now), slide it back to its original height
    if ($this.data('originalHeight') &&
        $this.height() > $this.data('originalHeight'))
        $this.animate({ height: $this.data('originalHeight') }, 'slow');
});

Meleager answered 21/11, 2010 at 21:35 Comment(0)

Found this post and end up using Greg's original 1px suggestion - works great!

Just added a callback to the animate function, to set the height of the element to 'auto' when the animation ends (in my case, the content of that specific element could change and be bigger).

Groundless answered 16/4, 2011 at 18:27 Comment(0)

$('div').click(function() { 
    if($('p').is(':hidden')) {
       $('p').slideUp();
    } else {
       $('p').slideDown(function() { $('p').css('height','1px'); });
    }
}

That should set the height of the p tags to be 1px once they've finished sliding.

Chatelain answered 2/9, 2009 at 19:57 Comment(4)

That would set the height of every p-tag to 1px. – Paniagua 2/9, 2009 at 20:7

$(this).css('height','1px'); should be fine then. – Chatelain 2/9, 2009 at 20:10

You're applying it on the callback of the slideDown() method, which means as soon as it's visible, it's going to be hidden again. Did you mean to set it for the slideup instead? – Paniagua 2/9, 2009 at 20:16

Hmm, I think I got my reveal/hide functions mixed up, yeah. Either way getting show/hide functionality to work should be a lot simpler than checking for heights and such. – Chatelain 2/9, 2009 at 20:24

This worked for me.

<div class="product-category">
    <div class="category-name">
        Cars
    </div>
    <div class="category-products" style="display: none; overflow: hidden;">
        <div class="product">Red Car</div>
        <div class="product">Green Car</div>
        <div class="product">Yellow Car</div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.product-category .category-name').click(function() {
        if ($(this).parent().hasClass('active')) {
            $(this).parent().removeClass('active');
            var height = $(this).parent().find('.category-products').height();
            $(this).parent().find('.category-products').animate({ height : '0px' }, 600, function() {
                $(this).parent().find('.category-products').height(height).hide();
            });
        } else {
            $(this).parent().addClass('active');
            var height = $(this).parent().find('.category-products').height();
            $(this).parent().find('.category-products').height(0).show().animate({ height : height + 'px' }, 600);
        }
    });
});
</script>

Lissettelissi answered 22/11, 2011 at 1:14 Comment(0)

My solution is to store in the data attribute of the close button the original size of container (could have been stored also in the container itself, if you don't use the same button to also show again the container):

$(document).ready(function(){
    $('.infoBox .closeBtn').toggle(hideBox, showBox);
});

function hideBox()
{
    var parent = $(this).parent();

    $(this).text('Show').data('originalHeight', parent.css('height'));

    parent.animate({'height': 20});
    return false;
}

function showBox()
{
    var parent = $(this).parent();

    $(this).text('Hide');

    parent.animate({
        'height': $(this).data('originalHeight')
    });
    return false;
}

Flatten answered 20/7, 2012 at 18:11 Comment(0)

I wanted to point to this answer, which suggest setting the height to "show" with the animate() function. I had to edit my "slideUp" style animate to use height:"hide" to work with it.

Pieper answered 2/6, 2014 at 12:44 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags