JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<input type="checkbox" id="toggleControl" /><label for="toggleControl"> element</label>
<div id="status"></div>
<div id="demo">
    <p>Can be shown or hidden, by checking, or unchecking, the checkbox.</p>
</div>

CSS

#toggleControl + label::before {
    content: 'Show';
}

#toggleControl:checked + label::before {
    content: 'Hide';
}

JavaScript

$('#toggleControl').on('change', function(){
    $('#demo').toggle(this.checked);
    $('#status').text(function(){
        return $('#demo').is(':visible') ? 'Shown' : 'Hidden';
    });
}).change();