try this code for jquery
$('#optout').click(function () {
$('#Option1').slideToggle("slow");
});
Question
Using Jquery: How do I gracefully resize a Parent div after hiding a child div? This code works to hide the Option1 as I want but then the container div SLAMS shut in a jarring way. Can I chain something on to the end to gracefully resize the div to fit the new size after the Option1 hides?
HTML:
<div id="Container">
<div id="Option1">
Users can do things here
</div>
<div id="Option2">
<input type="checkbox" id="optout">I opt out of the other options
</div>
</div>
Javascript/JQuery:
$('#optout').click(function () {
if ($(this).prop('checked') == true) {
$('#Option1').hide("drop");
} else {
$('#Option1').show("drop");
}
});
Solution
try this code for jquery
$('#optout').click(function () {
$('#Option1').slideToggle("slow");
});