JSFiddle - React, Tailwind, and code Playground
HTML
<form action="">
<input id="show" type="radio" name="toggle" value="show" checked>Show<br>
<input id="hide" type="radio" name="toggle" value="hide">Hide
</form>
<div id="toggle">
This div will be toggled
</div>
CSS
#toggle {
background-color: blue;
border: 1px solid black;
}
JavaScript
// Callback function for $(document).ready()
$(function() {
// Bind a change event handler to the radio buttons whose name is toggle
$('input[name=toggle]:radio').change(function () {
// This code is executed whenever the radio buttons are clicked
// See if the show button is clicked. This will be a boolean
var show = $('#show').is(':checked');
// jQuery's toggle() method takes a boolean value to specifiy if we should show or hide the element (in this case, the div with id toggle)
$('#toggle').toggle(show);
});
});