JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<label><input type="checkbox">Hotel</label>
</div>
<div class="location">Destination: <input type="text"></div>
<div>Name: <input type="text"></div>
<div>Coupon Code: <input type="text"></div>
CSS
div {
padding-bottom: 10px;
}
label {
margin-right: 10px;
}
label:hover {
cursor: pointer;
}
JavaScript
$(document).ready(function(){
$("input[name$='search']").click(function(){
var checkbox_value = $(this).val();
if(checkbox_value=='Hotel and flight') {
$(".location").slideDown("medium");
}
else if(checkbox_value=='Hotel only') {
$(".location").slideUp("medium");
}
});
$(".location").hide();
});