Home/ Questions/Q 356275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T12:05:47+00:00

I’m trying to get an element to animate to its natural height – i.e.

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0