Question

I’ve got an absolute positioned container, which is bottom aligned.

Now I would like to toggle (show/hide) some content without the container getting larger than its contents – and preferably without setting the height explicitly.

html

<div id="outer">
    <div class="expandableContent">
        <p class="toggler">Toggle</p>
        <div>
            <p>Some content here</p>
            <p>Some content there</p>
            <p>Some content everywhere</p>
        </div>
    </div>
</div>

css

#outer {
     height: 300px;
     position: relative;
}

.expandableContent {
    position: absolute;
    bottom: 10px;
}

 .expandableContent > div {
     display: none;
 }

jquery

$(document).ready(function () {
    $('.toggler').click( function() {
        $(this).next().toggle(1000);
    });
});

Here’s a link: http://jsfiddle.net/SunnyRed/A8pNv/1/

Answer 1

You don’t need to set the height…just the width of the explandable div. I have modified this for you in your jsfiddle.

The only thing i did was:

 .expandableContent {
    position: absolute;
    bottom: 10px;
    width:200px;
}