JSFiddle - React, Tailwind, and code Playground

by Sparrow Squire

HTML

<form>
    <p id="booking">Do you have a current booking with us?</p>
			
	
	<input type="radio" name="booked" id="active-radio" />
    <label for="yes" class="active">Yes</label>
    
	<div class="option-panel" id="optpan">
					<label for="booking-ref" class="active">Booking Ref:</label>
			        <input type="text" name="booking_ref"/>
							    
					<label for="postcode" class="active">Postcode</label>
					<input type="text" name="postcode" />
							    
					<label for="departure" class="active">Date of Departure</label>
					<select name="dday" class="inline">
							<option value="|">&#45;  &#45;</option>
					</select>
							    
					<label for="destination" class="active">Destination</label>
					<input type="text" name="destination" />
	</div>
							
	<input type="radio" name="booked" />
    <label for="no">No</label>
    
</form>

CSS

.option-panel {
        display: none;
        margin-left: 40px
    }

JavaScript

$( document ).ready(function() {
    
  $("input[name='booked']").change(function(){
        // $('.option-panel').hide();
      
        if ($('#active-radio').prop('checked')){
            $('#optpan').show();
        }else{
        
           $('#optpan').hide();
        }
    
  });
    
});