I'm currently facing an issue where I want a divider to adjust its size when another divider changes size due to new content being loaded into it. However, even after binding the resize event handler to the divider that loads the content, the event doesn't seem to trigger when the content is loaded causing the divider to stretch. Could this be because no explicit "height" property is defined for the divider in the CSS?
If anyone needs a visual representation, here's a JSFiddle link: http://jsfiddle.net/q2pJ9/1/
Here's a snippet of the HTML:
<div class="container">
<button>Click me</button>
<div class="content"></div>
</div>
<div class="other_container">
<p>Will show up when the "container" extends.</p>
</div>
CSS Used:
.content{
display:none;
height: 200px;
background: grey;
}
.other_container{
display: none;
}
Javascript Functionality:
$("button").click(function(){
$(".content").slideToggle();
});
$(".container").resize(function(){
$(".other_container").fadeIn();
});
Your support and guidance are greatly appreciated.