I want to incorporate a hidden div that, when triggered by a button click, will smoothly reveal itself and "push" away part of another div without changing the overall size of the containing div.
However, I have encountered an issue where the div below the hidden element appears to flicker or bounce slightly. This could be attributed to the animations not synchronizing properly.
Below is the code snippet:
HTML:
<div id="wrapper">
<div id="button">CLICK</div>
<div id="content"></div>
<div id="hidden"></div>
<div id="bottom"></div>
</div>
CSS:
#wrapper {
border: 1px solid green;
width: 300px;
}
#content {
border: 1px solid red;
height: 200px;
}
#hidden {
border: 1px solid blue;
height: 100px;
}
#bottom {
height: 20px;
border: 1px solid purple;
}
JAVASCRIPT
$("#button").click(function (e) {
var newHeight = $("#content").height();
var hiddenHeight = $("#hidden").outerHeight();
var visible = $("#hidden").is(":visible");
newHeight += (visible ? hiddenHeight : -hiddenHeight);
$("#hidden").slideToggle({
duration: 200,
queue: false
});
$("#content").animate({
height: newHeight
}, {
duration: 200,
queue: false
});
});
fiddle: http://jsfiddle.net/2exxrs1n/
Are there any suggestions on how this issue can be resolved, or perhaps an alternative approach to achieving the desired effect?