I have an application form that users answer questions on and am looking for some responsiveness. Basically what I am looking for is some way so that if the user checks something like
Other
<div>
<div>
<input type="checkbox" name="Other" value="Other" />
</div>
<label>Other</label>
</div>
<div>
<label>If other, which game(s)?</label>
<textarea name="Other Response"></textarea>
</div>
Initially you can create textarea content with display:'none' property, so that the not visible to the user and you can show the part of other Content HTML element, when he checks the other checkbox.
Check the working code here,
**HTML**
<div class="userCheck">
<input type="checkbox" id="other" name="Other" value="Other" />
<label>Other</label>
</div>
<div class="otherCon">
<label>If other, which game(s)?</label>
<textarea name="Other Response"></textarea>
</div>
**CSS**
.otherCon {
visibility: hidden;
}
**JS**
$('#other').on('click', function() {
if ($(this).is(':checked')) {
$('.otherCon').css('visibility', 'visible');
} else {
$('.otherCon').css('visibility', 'hidden');
}
});