JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<body> 
<input type="text" placeholder="FirstField" name="firstfield" id="firstfield"/> 
<input type="checkbox" name="for_advanced" id="for_advanced" onclick="validation()" /> 
<div class="no-display" id="for_hidden"> 
<input type="text" placeholder="SecondField" name="firstfield" id="firstfield"/> 
<input type="text" placeholder="ThirdField" name="thirdfield" id="thirdfield"/> 
</div> 
</body>

CSS

.no-display{display:none;}

JavaScript

function validation() 
{ 
var checkbox = document.getElementById("for_advanced"); 
if(checkbox.checked) 
document.getElementById("for_hidden").className = ""; 
else 
document.getElementById("for_hidden").className = "no-display"; 
}