JSFiddle - React, Tailwind, and code Playground

by Kaleb Hornsby

HTML

<div id="trigger" onclick="triggerClick()">Click here.</div> 
<div id="fields"> 
    <form id="form" onsubmit="return false"> 
        <input id="check" type="checkbox" onclick="checkClick(this)" /> 
        <label for="check">Enable second fieldset</label> 
        <fieldset> 
            <div><input id="f1" type="text" autofocus /> 
                 <label>Field 1: </label></div></fieldset> 
        <fieldset id="f2set" class="disabled"> 
            <div><input id="f2" type="text" disabled="disabled" /> 
         <label>Field 2: </label> </div></fieldset> 
    </form> 
</div>

CSS

#fields { display: none; width: 25%; }
div>input { float: right; background-color: #fff; }
div>input[disabled] { background-color: #ddd; }
input[disabled] + label { color: #ddd; }
fieldset.enabled legend { color: #000; }
fieldset.disabled legend { color: #ddd; }

JavaScript

function triggerClick() {
    document.getElementById('trigger').style.display = 'none';
    document.getElementById('fields').style.display = 'block';
    document.getElementById('check').focus();
}
function checkClick(check) {
    if (check.checked) {
        document.getElementById('f2').disabled = '';
        document.getElementById('f2set').className = 'enabled';
    } else {
        document.getElementById('f2').disabled = 'disabled';
        document.getElementById('f2set').className = 'disabled';
    }
}