Is there a way to make the parent div automatically expand when the child div with a fixed width is displayed onclick?
Goal: I want the child div to show up when I click the link, and at the same time, I need the parent div to expand or scale to fit the width of the child div. Also, I do not want the child div to overflow outside of the parent div.
Thank you :)
JS:
$(function() {
$('#mylink').click(function() {
$('#mybox').show();
});
});
HTML:
<a id="mylink" href="javascript:void(0);">SHOW BOX</a><hr />
<div class="parent">
<div class="header">Header Content</div>
<div id="mybox" class="child">Content</div>
</div>
CSS:
body {
font-family:verdana;
font-size:10px;
}
.parent {
border:1px solid blue;
}
.child {
display:none;
width:400px;
border:1px solid red;
background:lightblue;
}
.header {
width:auto;
border:1px solid green;
}