Bootstrap Conditional Form

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form id="live_form">
 <div class="form-group">
  <div class="">
   <div class="radio">
	<label class="radio">
	 <input name="rating" type="radio" value="Bad"/>
	 Bad
	</label>
   </div>
   
   <div class="radio">
	
   </div>
   <div class="radio">
	<label class="radio">
	 <input name="rating" type="radio" value="Very Good"/>
	 Very Good
	</label>
   </div>
  </div>
 </div>
 <div class="form-group hidden">
  <label class="control-label" for="feedback_bad">
   Bad We're sorry to hear you had a bad experience.  What went wrong?
  </label>
  <textarea class="form-control" cols="40" id="feedback_bad" name="feedback_bad" rows="10"></textarea>
 </div>

</form>

JavaScript

$( document ).ready(function() { //wait until body loads
		//Inputs that determine what fields to show
		var rating = $('#live_form input:radio[name=rating]');
				
		//Wrappers for all fields
		var bad = $('#live_form textarea[name="feedback_bad"]').parent();
		var ok = $('#live_form textarea[name="feedback_ok"]').parent();
		var all=bad.add(ok); //shortcut for all wrapper elements
		
		rating.change(function(){ //when the rating changes
			var value=this.value;						
			all.addClass('hidden'); //hide everything and reveal as needed
			if (value == 'Bad'){
				bad.removeClass('hidden'); //show feedback_bad					
			}	
		});	
});