Search code examples
jqueryhtmlcssslidedown

jQuery slideDown with set height and overflow

I have the following HTML code

<div class="text">bla bla bla bla</div>
<div class="button">Show</div>

And the CSS

.text{
  height:100px;
  overflow:hidden;
}

Assume .text div has way more text and what I do is hide the amount of text below 100px.

How can I slideDown() the div so I can view the text when I click the button?

Using $(".button").slideDown(); doesn't work because I need to remove the height and then slideDown() but this will not work either.

Solution

  • Try this it is very simple and easy without creating any clone.

    $(function(){
    $(".button").click(function(){
        var $text = $(".text");
        var contentHeight = $text
                            .addClass('heightAuto').height();
        $text.removeClass('heightAuto').animate({ 
            height: (contentHeight == $text.height() ? 100 : contentHeight)
        }, 500);

    });
});

    Added a new class

    .heightAuto{
    height:auto;
}

    Demo