Question

I’ve been working on the functionality of my page and ease of use has been one thing i’ve been targeting. To improve my layout, i’ve decided to create collapsable sections. However, i’m having 2 problems. 1) I can set the DIV to expand, but not to shrink again. So i decided to create something which tells it if it is larger than the smallest size, expand the content, however now it doesn’t expand either. Here is my code:

$(".contentBox").click(function(){
    var boxHeight = $(this).height();
    var minBoxHeight = 40;

    if (boxHeight < minBoxHeight)(function() {
        $(this).css({
            height: 'auto',
            transition: 'height 800ms, background 800ms, box-shadow 800ms'
        });
    )};
});

2) Because i’m using auto height, which is one way of doing things, i’m sacrificing my animation of sliding when it expands and collapses. However, if anyone knows a way to keep the height changing to the content size aswell as maintaining the animation i want that would be brilliant.

Answer 1

You made a typo:

$(".contentBox").click(function(){
        var boxHeight = $(this).height();
        var minBoxHeight = 40;

        if (boxHeight <= minBoxHeight) {
            $(this).css('height', 'auto');
            var tmp_height = $(this).height();
            $(this).css('height', boxHeight+'px');
            $(this).css({
                height : tmp_height+'px',
                transition: 'height 800ms, background 800ms, box-shadow 800ms'
            });
        } else {
            $(this).css({
                height: '40px',
                transition: 'height 800ms, background 800ms, box-shadow 800ms'
            });
        }
    });

That would let it expand and collapse

I believe this would do all the tricks.
You calculate the height of the div with contents into a variable.
Reset it to it’s original position. Then do the transition.

Here’s a jsfiddle. I couldn’t get it to work with the transition, but got it working with animate:

http://jsfiddle.net/uLabL/