Question

I want to hide and show a div element when a checkbox is selected or unselected using jQuery’s slideUp() and slideDown().
My div looks as follows:

<div class="parent">
    <label class="childLeft">text</label>
    <div class="childRight">
      <input type="text" />
      <select>
        ...
      </select>
    </div>
</div>

and the css code for this is:

.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;
}

On slideUp(1000) it looks like only the padding are slided and the rest suddenly disappears. On slideDown(1000) the div appears and then the padding slides.

Do you have any idea why is this happening ?

Answer 1

The reason is because you have a min-height set on the parent element. This makes it not possible to make that element smaller than 22px, causing the effect you are seeing.