dichat dichat - 3 months ago 8
HTML Question

Responsive contact/application form

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>


Then and only then it shows

<div>
<label>If other, which game(s)?</label>
<textarea name="Other Response"></textarea>
</div>


Thank you! I've got it working.

Answer

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');
 }
});
Comments