JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<div class="radio-question">
<p><strong>Will you provide any marketing materials to support the demo(s)?</strong></p>
                    
                        <input name="marketingMaterialsProvided" type="radio" id="marketingMaterialsNo" value="No Appliances" checked />
                        <label for="marketingMaterialsNo" class="radio-label">
                            <span>No</span>
                        </label>
                        
                        <input name="marketingMaterialsProvided" type="radio" id="marketingMaterialsYes" class="yes" value="Yes - Appliances" />
                        <label for="marketingMaterialsYes" class="radio-label yes">
                            <span>Yes</span>
                        </label>
                        
                        <div class="yes-more">
                            <label for="marketingMaterialsYesInfo">What items will you provide?</label>
                            <input class="form-control" name="marketingMaterialsYesItems" id="marketingMaterialsYesInfo" type="text"  />
                        </div>
</div>

CSS

.yes-more {
    display: none;
}

JavaScript

$('input[type="radio"]').on('click', function(){
	if ( $(this).hasClass('yes') ){
    	$(this).parent('.radio-question').find('.yes-more').slideDown(100);
    }
    else {
    	$(this).parent('.radio-question').find('.yes-more').slideUp(100);
    }
});