Hidden text area taking up space

Question

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>

visibility basically just makes things "transparent". The thing still occupies space, it still counts for sizing/positioning calculations. It's just simply completely see-through. If you want it ELIMINATED from positioning/sizing calculations, then use `display: none` instead. — Marc B, Aug 29 '16 at 14:40
http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone — Jonathan, Aug 29 '16 at 14:41

eisbehr · Accepted Answer · 2016-08-29T15:04:14.480

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>

score 0 · Answer 2 · answered Aug 29 '16 at 14:40

0

use display: none instead. That hides the element and doesn't any space. jQuery has functions hide(), show() and toggle() to make it easier

answered Aug 29 '16 at 14:40

Honza

683
7
22

score -1 · Answer 3 · answered Aug 29 '16 at 14:42

You can use the attribute hidden for the div with class otherCon and change the jquery to use show() or hide() or remove the if and add $('.otherCon').toggle();

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

<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" hidden>
    <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>

score -1 · Answer 4 · answered Aug 29 '16 at 14:43

when setting the visibility, the element is just 'invisible' but still takes space to place it, you may want to use fadeOut and fadeIn, slideUp and slideDown of the jQuery that will really hide the element and also get rid of their spaces with animation. You could also change the display property to none or block to hide it in a simply way

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

You could also use the <label for="checkbox id"/> to toggle the checked state of checkbox by click on the label text

try it on https://jsfiddle.net/8qqLmyad/1/

You may append a css style to the `div` that indicate `display: none;`, see the example on https://jsfiddle.net/8qqLmyad/2/ — Zay Lau, Aug 29 '16 at 14:51

Hidden text area taking up space

4 Answers4