jQuery slideDown with set height and overflow

Question

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.

http://stackoverflow.com/questions/1369715/how-can-i-animate-an-element-to-its-natural-height-using-jquery — skybondsor, Jan 27 '12 at 16:00

score 14 · Answer 1 · edited Dec 04 '18 at 12:43

I like Shankar's solution but the functionality breaks down after the first two clicks.. This is because the auto class gets overwritten by the inline height style. So instead I altered the height attribute only.

Here's my go at it:

$(".button").click(function(){
    $box = $(".text");
    minimumHeight = 100;

    // get current height
    currentHeight = $box.height();

    // get height with auto applied
    autoHeight = $box.css('height', 'auto').height();

    // reset height and revert to original if current and auto are equal
    $box.css('height', currentHeight).animate({
        height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
    })
});

One flaw is that if you add padding to the box you get some ugly jumping. Open to any solutions to fix that.

Here's a demo

Improvements and suggestions are very welcome

ShankarSangoli · Accepted Answer · 2012-01-27T16:06:04.003

8

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

edited Jan 27 '12 at 16:06

answered Jan 27 '12 at 16:00

ShankarSangoli

69,612
13
93
124

Interesting; I thought the 'blip' that would occur when you set `height: auto` would be much more noticeable. Is this because the CSS doesn't get rendered until the function returns (i.e. quasi-threading)? – Kato Jan 27 '12 at 16:17
It happens within fraction of micro seconds so. – ShankarSangoli Jan 27 '12 at 16:19
I'm thinking it doesn't even happen. I've noticed before that I have to setTimeout() when I make css changes then try to utilize them right away. I suspect the CSS change doesn't get applied until the js method exits. – Kato Jan 27 '12 at 19:26
1

CSS doesn't get rendered until JavaScript finishes. And the size of elements isn't calculated until the size is needed or the page is rendered. When the `height: auto` is first added, the browser doesn't render it or calculate the new size. Then it calculates the size when `height()` is called. Since the `height: auto` is removed before the end of the function, the browser never gets a chance to render it that way. – Jordan Miner Oct 05 '12 at 21:08

score 4 · Answer 3 · answered Jan 27 '12 at 15:57

4

Clean but expensive option: Use animate directly instead of slideDown(). Determine the height you want to animate to by creating a clone and setting the height to auto.

$('.button').click(function() {
   var $div = $('div.text');
   $div.animate({height: determineActualHeight($div)});
});

// if you can determine the div's height without this, it would be faster
// what makes this expensive is inserting and removing an element from the dom
// of course, you aren't doing this a thousand times a second, so it's probably no biggie
function determineActualHeight($div) {
   var $clone = $div.clone().hide().css('height', 'auto').appendTo($div.parent()),
       height = $clone.height();
   $clone.remove();
   return height;
}

A little uglier but less expensive option: just set the height to auto, hide the element, then use slideDown() to render it:

$('.button').click(function() {
   $('div.text').hide().css('height', 'auto').slideDown();
}

answered Jan 27 '12 at 15:57

Kato

40,352
6
119
149

1

beat me to it haha i made a fiddle for the second option :O (yours was a bit cleaner however) http://jsfiddle.net/GordnFreeman/thJwU/9/ :) – Gordnfreeman Jan 27 '12 at 16:00
And that truly is the conundrum of SO is it not? Answer it thoroughly or answer it fast? Thus, I always try to upvote ALL the useful answers, and not just the first one, particularly if each contains some unique helpful detail. :) If you did the work, you should post your answer; I'm sure it will help someone. – Kato Jan 27 '12 at 16:09
well i dont want to hide it... simply slideDown it or animate it – stergosz Jan 27 '12 at 17:57
well then you want the first approach, or +ShankarSangoli's. FYI - the second option doesn't hide it, just simply makes it expand from zero instead of the current height. – Kato Jan 27 '12 at 19:28

score 1 · Answer 4 · answered Jun 28 '13 at 18:25

1

use scrollHeight property, this can make your script dynamic.

$('.button').click(function() {
    $('.text').animate({ 'height': $('.text')[0].scrollHeight }, 1000);
});

answered Jun 28 '13 at 18:25

GusDeCooL

5,639
17
68
102

score 1 · Answer 5 · edited Nov 10 '18 at 00:31

Shankar and Erik's solutions are on the right track. Erik fixed Shankar's problem of only working twice. Now I'm going to fix Erik's problem of having padding:

$(function(){
    $(".arrow-details").click(function(e){
        var id = "#other-" + e.target.id;
        var $box = $(id);
        minimumHeight = 350;
        currentHeight = $box.outerHeight();
        autoHeight = $box.css('height', 'auto').outerHeight();
        $box.css('height', currentHeight).animate({
            height: (currentHeight == autoHeight ? minimumHeight : autoHeight)
        })
    });
})

Basically, I took Erik's jsfiddle and changed innerHeight to outerHeight.

Demo

I also had several divs on my page where the height can change, so instead of hard coding which div gets changed, the impacted div is now determined by the ID of the button/image/div the user clicks on.

score 1 · Answer 6 · answered Jan 27 '12 at 15:57

1

I just totally misread your question.

Unfortunately, you can't really set to auto height. But you can animate to a set height, using .animate();

.animate({height:'200px'};

slideUp()' and .slideDown(); set the divs to display: none and display: block So you're right, that wouldn't work for what you're trying to do.

EDIT

I just saw Kato's post. That's probably the best option for you.

answered Jan 27 '12 at 15:57

Jeremy Miller

373
6
21

You're on the right track, your first answer was also not bad. You just need the height: auto in the css to get things rolling :) – Kato Jan 27 '12 at 16:11
Ah, I didn't realize the `height: auto` worked with `.slideDown();` - doesn't it default to `display: none`? Also, I wasn't aware you could do `.animate();` to `height: auto` Ha, I'm certainly no jQuery master, so I've still got a ways to go. – Jeremy Miller Jan 27 '12 at 16:15

jQuery slideDown with set height and overflow

6 Answers6

Linked