JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<div id="divPrincipal" class="divPrincipal">
    <div id="div-1" class="divs"></div>
    <div id="div-2" class="divs"></div>
    <div id="div-3" class="divs"></div>
</div>

<input type="button" value="Visivility a todos los div's!" onclick="c()" />

CSS

html, body {width:100%; height:100%;}

.divPrincipal {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:20%;
}
.divs {
	position:relative;
	top:0;
	left:0;
	width:30%;
	height:100%;
	margin:3px;
	background-color:navy;
	float:left;
	
	visibility:hidden;
}

JavaScript

function c(){
    var div = document.getElementById("divPrincipal"),
        childs = div.getElementsByClassName("divs"),
        total = childs.length;
    
    for (i = 0; i < total; i++)
        childs[i].style.visibility = "visible";
}