JSFiddle - React, Tailwind, and code Playground

by c2webdev

HTML

<input type="radio" name='thing' value='valuable' data-id="bank" />Running Event
<input type="radio" name='thing' value='valuable' data-id="school" />Other challenges
<div id="school" class="none">
<label for="name">What was the activity called?</label>
<select id = "myList">
<option value = "1">Virgin London Marathon</option>
<option value = "2">Round the Island cycle challenge</option>
<option value = "3">Kilimanjaro trek</option>
<option value = "4">Thames Path Challenge</option>
</select>
</div>
<div id="bank" class="none">
<label for="name">What was the activity called?</label>
<select id = "myList">
<option value = "1">Pancake Making</option>
<option value = "2">Egg and spoon race</option>
<option value = "3">Sack race </option>
<option value = "4">Three leg race</option>
</select></div>

CSS

.none {
display:none;
}

JavaScript

$(':radio').change(function (event) {
var id = $(this).data('id');
$('#' + id).addClass('none').siblings().removeClass('none');
});