In my current coding project, I am using jQuery to calculate the height of #rightDesc and adjusting the height of #rightHistory accordingly. Both elements are divs within the layout.
$('#rightHistory').height($('#rightMiddleCenter').innerHeight() - $('#rightDesc').outerHeight() - $('#rightDescToggle').outerHeight());
The structure is as follows:
<div id="rightMiddleCenter">
<div id="rightDesc">
</div>
<div id="rightDescToggle">
Toggle Descriptions
</div>
<div id="rightHistory">
</div>
</div>
Here is the associated CSS:
#rightMiddleCenter{
float:left;
height:100%;
width:260px;
}
#rightDesc{
padding:0 0 10px;
}
#rightDescToggle{
padding:5px 5px 5px 0;
cursor:pointer;
}
#rightHistory{
}
I have decided to implement a slideToggle function for #rightDesc, but encountered an issue where even when hidden, jQuery still returns its full height. This leads to #rightHistory's height not adjusting correctly. I would appreciate any suggestions or solutions that could help resolve this situation.