JSFiddle - React, Tailwind, and code Playground
HTML
<input id="addForm" type="button" value="mostrar formulario"/>
<form id="form" class="">
<input id="addBlock" type="button" value="mostrar bloque"/>
<fieldset id="block">
<legend>bloque</legend>
<span>... elementos de formulario ...</span>
</fieldset>
</form>
CSS
form, input[type="button"]{
padding:1em;
}
form{
background: whitesmoke;
margin:1em 0;
}
fieldset{
border: 1px dotted gray;
padding:1em;
margin: 1em 0 0 0;
}
/********************************/
#form, #block{display:none;}
.activo{display:block !important;}
JavaScript
window.onload = function(){
var addForm = document.getElementById("addForm");
var addBlock = document.getElementById("addBlock");
var form = document.getElementById("form");
var block = document.getElementById("block");
addForm.onclick = function(){
form.className = "activo";
}
addBlock.onclick = function(){
if(addBlock.value == "mostrar bloque"){
block.className = "activo";
addBlock.value = "ocultar bloque";
}
else{
block.className = "";
addBlock.value = "mostrar bloque";
}
}
}