Versteckter Textbereich, der Platz einnimmt

Question

So habe ich den folgenden Code-Setup, so dass wenn und nur wenn ein Benutzer Andere überprüft, dann das "Wenn anderes Feld" angezeigt wird. Dadurch bleibt leerer Platz, wenn die Box ausgeblendet ist. Gibt es sowieso, um dies zu entfernen, wenn die Box deaktiviert ist und scrollen Sie den Inhalt nach unten und fügen Sie das "Wenn andere Box", wenn das Feld Andere aktiviert ist.

Hier ist die folgende Arbeits 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 1

visibility und opacity machen nur die Elemente transparent aber verschwinden nicht im Stich lassen. Dazu benötigen Sie display auf none eingestellt. Oder noch besser, da Sie jQuery, .show() und .hide() verwenden.

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

Oder weil Sie eine Bedingung verwenden, benutzen Sie einfach .toggle():

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

Arbeitsbeispiel:

$('#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>

Answer 2

Verwendung display: none statt. Das verbirgt das Element und macht keinen Platz. jQuery hat Funktionen hide(), show() und Knebel(), um es einfacher

Answer 3

Sie das Attribut verwenden kann hidden für die div mit Klasse otherCon und die jquery ändern show() oder hide() zu verwenden oder die if entfernen und hinzufügen $('.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>

Answer 4

wenn die visibility Einstellung ist das Element nur 'unsichtbar' aber nimmt noch Raum Platz Vielleicht möchten Sie und fadeIn, slideUp und slideDown der jQuery verwenden, die das Element wirklich verstecken und auch ihre Räume mit Animation loswerden. Sie könnten auch die display Eigenschaft none oder block ändern Sie es in eine einfach Art und Weise

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

Sie auch die <label for="checkbox id"/> den checked Zustand der Checkbox durch Klick auf das Label-Text

versuchen, es zu wechseln verwenden könnte zu verstecken auf https://jsfiddle.net/8qqLmyad/1/