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
<input type="radio" name='thing' value='valuable' data-id="bakery" />Baking
<div id="school" class="none">
    <label for="name">What was the activity called?</label>
    <select id="myList">
        <option value="1">List item 1</option>
        <option value="2">List item 2</option>
        <option value="3">List item 3</option>
        <option value="4">List item 4</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>
<div id="bakery" 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;
}
.block {
    display: block;
}

JavaScript

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