JSFiddle - React, Tailwind, and code Playground

by Kiruthika N

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form class="form-horizontal" action="#" method="post" id="questionForm">
      <input type="hidden" name="recid" value="1">

      <table class="table table-condensed table-hover table-bordered">

		  <tr>
		  <td><strong>Question 1</strong></td>
		  <td>please answer yes or no to this question</td>
		  <td>
			  <div class="controls">
	      		  <label class="radio inline">
		  <input type="radio" name="question1" id="question1" value="Yes" required>Yes		  </label>
		  		  <label class="radio inline">
		  <input type="radio" name="question1" id="question1" value="No" required>No		  </label>
		  		  <label for="question1" class="error"></label>
	    </div>
		  </td>
		  </tr>
		  
		  
		  <tr class="question1yes">
		  <td></td>
		  <td>Please describe this and when it started</td>
		  <td>
			  <div class="controls">
		  <textarea name="question1Details" rows="3"></textarea>
		  <label for="question1Details" class="error"></label>
	    </div>
		  </td>
		  </tr>
		  
		  </table>
</div>              
                 	<div class="control-group">
		    <div class="controls">
		      <button type="submit" class="btn btn-primary">Continue</button>
		      <button type="reset" class="btn">Reset</button>
		    </div>
		</div>
    
      </form>

JavaScript

$().ready(function() {
		// validate the form when it is submitted
		$("#questionForm").validate();
		
		if($("#question1:checked").length > 0){
					// yes is checked... show the dependent fields  
						$(".question1yes").show(); 
					}else{
						// hide it and blank the fields, just in case they have something in them
						$(".question1yes").hide(); 
						$("#question1Details").val("");
					}


		$("#question1").click(function(){ 
					// show the dependent fields
					if($(this).val() == "Yes"){
						$(".question1yes").show();
					}else{
						// hide the dependent fields and blank them
						$(".question1yes").hide();
						$("#question1Details").val("");
					}
					});
		
		});