CODEWITHSUNDEEP
javascriptjquerycssheightslidetoggle
Kallum Burgin
Kallum Burgin

Reputation: 103

slideToggle hidden height not zero

I'm currently grabbing #rightDesc's height in jQuery and using it to decide #rightHistory's height, both of which are divs.

$('#rightHistory').height($('#rightMiddleCenter').innerHeight() - $('#rightDesc').outerHeight() - $('#rightDescToggle').outerHeight());

The layout is below:

<div id="rightMiddleCenter">
    <div id="rightDesc">
    </div>
    <div id="rightDescToggle">
        Toggle Descriptions
    </div>
    <div id="rightHistory">
    </div>
</div>

CSS:

#rightMiddleCenter{
float:left;
height:100%;
width:260px;
}
#rightDesc{
padding:0 0 10px;
}
#rightDescToggle{
padding:5px 5px 5px 0;
cursor:pointer;
}
#rightHistory{
}

I've now decided to make #rightDesc toggleable with slideToggle, but when it's hidden jQuery still returns its full height. This results in #rightHistory's height not changing and not taking up the amount of space it should. Can anyone suggest a solution? Any help would be greatly appreciated.

Upvotes: 0

Views: 373

Answers (1)

janpieter_z
janpieter_z

Reputation: 1742

When you use the visibility:hidden or display:noneway of hiding an element, the height and width of the element aren't changed, it just ain't visible.

edit: I suggest using custom data attributes for your specific action and use those for your height-width usage. Or just build your calculation a bit different and check if an element is visible or not, that way substituting the height and width with 0.

Upvotes: 1

Related Questions