CODEWITHSUNDEEP
jqueryanimationtogglecss-position
SunnyRed
SunnyRed

Reputation: 3545

Jquery toggle with position absolute bottom

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/

Upvotes: 0

Views: 4565

Answers (3)

Ali Habibzadeh
Ali Habibzadeh

Reputation: 11558

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;
}

Upvotes: 2

ShankarSangoli
ShankarSangoli

Reputation: 69905

Take a look at this, is much elegant now.

Working demo

Upvotes: 1

Mike Soule
Mike Soule

Reputation: 742

width: 100%;
white-space:nowrap;


Add the above the the div containing the text.
xGreen is correct that setting the width will work, but some browsers with also require text-wrapping to be disabled. An example would be with Chrome, just setting the width is not enough.

Upvotes: 1

Related Questions