When the div containing D1, D2... data exceeds the size of the div, ideally a scroll bar should appear. However, if I click on the Filter link, the size of the D1, D2... data div should increase. Since my data is dynamic, specifying a fixed height for the DIV is not possible.
$(document).ready(function(){
$("#filter-text").click(function(){
var a = $("#filter-option").toggle();
if(a.css("display")=="block"){
$("#data").css("height","80%");
}else{
$("#data").css("height","96%");
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div style="width:500px;height:500px;background-color:#efefef;position:absolute;">
<div id="parent" style="position:relative;">
<div id="filter" style="border:1px solid #00FF00;float:left;overflow:auto;width:100%;">
<div id="filter-text" style="cursor:pointer; color:#0000ff;height:4%;" >Filter</div>
<div id="filter-option" style="height:80px;">
This content will be hidden when filter is clicked
</div>
</div>
<div id="data" style="border:1px solid #0000FF;overflow:auto;float:left;width:100%;max-height:80%;position:relative;">
<table>
<tr><td>This div must have a scrollbar if its height is higher than its parent</td></tr>
... (remaining table rows from D1 to D20)
</table>
</div>
</div>
</div>