CODEWITHSUNDEEP
jquerycss
olo
olo

Reputation: 5271

toggle CSS auto expand height

I'd like to have the box shows in the middle of the page, I have two blocks, one on the left, and on the right, I used 'float' option align each edge, but I cannot get the the actual height (or auto-height) through the expand show/hide panel. if I remove float option, it works fine, but I do need float, and also centralize the box. If someone could help? thanks alot

here is what I did,

Markup

<div id="box">
 <div class="selection">Some selection</div>
 <div class="open">Click ME</div>
 <div class="showpanel">This is content</div>
</div>

CSS

#box{
    border:2px solid #000;
    width:450px;
    min-height:300px;
    padding:10px 0;
    margin:0 auto;

}
.open {
    width:350px;
    height:50px;
    background:blue;
    margin:5px auto 0px auto;
    color:#fff;
    text-align:right;
    float:right;
}
.showpanel{
    width:350px;
    height:300px;
    margin:0 auto 10px auto;
    background:red;
    display:none;
    float:right;
}

.selection{
background:green;
width:100px;
height:140px;
float:left;

}

​ JS

$('.open').click(function() {

    $('.showpanel').slideToggle('slow');


});​

​

Sample here

Upvotes: 0

Views: 2614

Answers (2)

Jashwant
Jashwant

Reputation: 29005

You need to clear the float

<div id="box">
 <div class="selection">Some selection</div>
 <div class="open">Click ME</div>
 <div class="showpanel">This is content</div>
</div>

Demo

Or use the overflow hack (keeping the same markup)

#box {
    border:2px solid #000;
    width:450px;
    min-height:300px;
    padding:10px 0;
    margin:0 auto;
    overflow:hidden;

}

Demo

Upvotes: 2

techfoobar
techfoobar

Reputation: 66663

To make the outer div expand out as needed when slide toggling a floating child, adding overflow: hidden to your outer DIV (#box) should do.

Check the demo: http://jsfiddle.net/PJDbb/1/

Upvotes: 4

Related Questions