I am trying to implement a feature where a div element will hide and show based on a checkbox selection using jQuery's slideUp() and slideDown() functions. The structure of my div is as follows:
<div class="parent">
<label class="childLeft">text</label>
<div class="childRight">
<input type="text" />
<select>
...
</select>
</div>
</div>
Here is the corresponding CSS code:
.parent {
float: left;
padding: 3px 0;
width: 100%;
min-height: 22px;
border-bottom-color: #F2F2F2;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
.childLeft {
float: left;
width: 108px;
margin-right: 2px;
}
.childRight {
float: right;
width: 209px;
}
When using slideUp(1000), only the padding slides and the rest of the content disappears abruptly. Conversely, slideDown(1000) first displays the div and then slides the padding.
Can you offer any insights into why this behavior is occurring?