JSFiddle - React, Tailwind, and code Playground
HTML
<div id="main">
<form>
<div id="week_day_time">
<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="texts">
<div id="Week" class="hidden">
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" class="hidden">
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" class="hidden">
more form...
originally hidden by css. But it will open when you select a time radio button.
more form for time
</div>
</div>
</form>
</div>
JavaScript
$(document).ready(function()
{
$(".hidden").hide();
$('input[name="week_day_time"]').click(function() {
$("#texts").children().slideUp();
$('#' + $(this).val()).slideDown();
});
});