JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<form>
<div id="week_day_time" class="shown">
<input type="radio" name="week_day_time" value="week" />Week<br />
<input type="radio" name="week_day_time" value="day" />Day<br />
<input type="radio" name="week_day_time" value="time" />Time
</div>
<div id="week">
more form for week.
originally hidden by css. But it will open when you select a week radio button.
more form for week
</div>
<div id="day">
more form...
originally hidden by css. But it will open when you select a day radio button.
more form for day
</div>
<div id="time">
more form...
originally hidden by css. But it will open when you select a time radio button.
more form for time
</div>
</form>
</div>
CSS
#week, #day, #time {
display: none;
}
div.shown {
display:block;
}
JavaScript
var current = '';
$('[name="week_day_time"]').change(function() {
if(current.length)
$('#' + current).slideUp();
current = $(this).val();
$('#' + $(this).val()).slideDown();
});