dichat dichat - 3 months ago 8
HTML Question

Hidden text area taking up space

So I have the following code setup so that when and only when a user checks Other, then the "If other box" shows. Doing so leaves empty space when the box is hidden. Is there anyway to get rid of this when the box is unchecked and scroll the content down and add the "If other box" when the Other box is checked.

Here is the following working code



$('#other').on('click', function() {
if ($(this).is(':checked')) {
$('.otherCon').css('visibility', 'visible');
} else {
$('.otherCon').css('visibility', 'hidden');
}
});

.otherCon {
visibility: hidden;
}
label {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
<div class="userCheck">
<input type="checkbox" id="other" name="Other" value="Other" />
<label>Other</label>
</div>
<div class="otherCon">
<label>If other</label>
<textarea id="text" name="Other Response"></textarea>
</div>
<div>
<label>More info</label>
<textarea id="text" name="More info"></textarea>
</div>




Answer

visibility and opacity are just making the elements transparent but don't let them disappear. For this you will need display set to none. Or even better, as you are using jQuery, .show() and .hide().

$('#other').on('click', function() {
    if ($(this).is(':checked')) {
        $('.otherCon').show();
    } else {
        $('.otherCon').hide();
    }
});

Or, because you use a condition, just use .toggle():

$('#other').on('click', function() {
    $('.otherCon').toggle($(this).is(':checked'));
});

Working example:

$('#other').on('click', function() {
    $('.otherCon').toggle($(this).is(':checked'));
});
.otherCon {
  display: none;
}
label {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="userCheck">
  <input type="checkbox" id="other" name="Other" value="Other" />
  <label>Other</label>
</div>
<div class="otherCon">
  <label>If other</label>
  <textarea id="text" name="Other Response"></textarea>
</div>
<div>
  <label>More info</label>
  <textarea id="text" name="More info"></textarea>
</div>