Set height as auto on expanding DIV with jQuery

Question

I am trying to set the height of a DIV to auto when I expand it, but when ever I do just '' it shrinks it down, or when I do 'auto' it does nothing. How do I get it to change the height to auto? I have content that will be all different heights and dont want to have to pass in a height parameter every time I set one of these up .This is what I have that is not working properly. The DIV will start out at a static height then needs to expand to expose all of the text in the DIV.

My jsFiddle: http://jsfiddle.net/gNsrG/

This is my jQuery code:

function changeheight(_this) {
    var thisText = $(_this).text() ;
    if (thisText == 'more') {
        $('#overviewtext').animate({
            'height': ''
        }, 600);
        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }
    else if (thisText  == 'less') {

        $('#overviewtext').animate({
            'height': '150px'
        }, 600);

        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }

    return false;
};

Possible duplicate: http://stackoverflow.com/questions/5003220/javascript-jquery-animate-to-auto-height — Nathan, Feb 06 '12 at 20:29
usually these type of "more" function requires swapping (toggle) 2 divs, one with smaller text and the other one with the whole text. just an idea... — machineaddict, Feb 06 '12 at 20:31
@Nathan ok well the duplicate question you are refering to does not have an answer — Laurence Burke, Feb 06 '12 at 20:31
@LaurenceBurke Actually the first answer looks like it could work... — Nathan, Feb 06 '12 at 20:33
@Nathan then maybe you should have tested and if it did work then refer to the answer not the question. Very anti-raising-duplicate-flag. — Laurence Burke, Feb 06 '12 at 20:34
@LaurenceBurke It just looks like a duplicate because of the question title and the code. Why don't you test it and leave an answer here? — Nathan, Feb 06 '12 at 20:35
@Nathan but its your job to make this a more informative site and less confusing like those dev forums. — Laurence Burke, Feb 06 '12 at 20:36
@LaurenceBurke I said _possible duplicate_ I didn't say it _is_ a duplicate. The third answer looks better than the first, by the way. — Nathan, Feb 06 '12 at 20:38

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

You shouldn't have to change the height ever. You should just be using JQuery's slidedown and slideup

I've made some changes to you example on jsfiddle

EDIT

I misunderstood what the question was. You want some text to show then you click more and more text shows. Then click less and less text shows. I've accomplished this but it is a bit hacky. Apparently JQuery doesn't do well with animating auto and percentages. Basically is what I did is when you click more. I stored the current height. Temporarily changed it to auto which makes it fully open. Got that height. Changed it back to closed (Hopefully the user doesn't see this). Then took that height and used it for the animate. I'm hoping there is an easier way but right now I can't find it.

My example is here jsfiddle

The only other way I can think of to accomplish this is to have an inner div that contains all the "MORE" text that you slidedown and slideup on but you would have to be able to differentiate where the cutoff was for the more text.

score 2 · Answer 2 · answered Feb 06 '12 at 20:32

2

Improved code:

function changeheight(_this) {
    $('#overviewtext').slideToggle(600); 
    $(_this).text($(_this).text() == 'more' ? 'less' : 'more');
    return false;
};

Demo here http://jsfiddle.net/gNsrG/3/

answered Feb 06 '12 at 20:32

dfsq

191,768
25
236
258

It does not quite do what I need it to. I need it set at a static height to start, then expands to expose all the text. This does the opposite and reduce it to nothing. – ios85 Feb 06 '12 at 20:41

score 0 · Answer 3 · answered Mar 05 '14 at 16:14

I had a similar problem and my solution was to use JqueryUI which animate classes on toggle when clicking in the actual text

jQuery ("#box_description_texts p").click(function() { 
    jQuery(this).toggleClass("box_text_expanded", 250);
});

and in the CSS

#box_description_texts p.box_text_expanded {height: auto;}

score 0 · Answer 4 · answered Feb 06 '12 at 20:30

0

you can change an element's css using .css(), in this case it would look like

$('#overviewtext').css('height', 'auto');

you might try adding that line after the animate call.

answered Feb 06 '12 at 20:30

Will P.

8,437
3
36
45

3

That won't animate it though, it'll just go to that height. To me it looks like the OP wants it to be animated. – Nathan Feb 06 '12 at 20:30

Set height as auto on expanding DIV with jQuery

4 Answers4

EDIT