JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="layer">
	<div class="el"></div>
</div>
<div class="layer">
	<div class="el"></div>
</div>
<div class="layer">
	<div class="el"></div>
</div>
<div class="layer">
	<div class="el"></div>
</div>
<div class="layer">
	<div class="el"></div>
</div>
<div class="layer">
	<div class="el"></div>
</div>

CSS

.layer {
	width: 100px;
	height: 100px;
	padding: 10px;
	background: black;
	margin: 10px;
}

.el {
	width: 20px;
	height: 20px;
	background: red;
}

.layer.hidden {
	opacity: 0.5;
}

JavaScript

let layers = document.querySelectorAll(".el");

layers.forEach((e)=>{
	e.addEventListener("click", function(){
 this.closest(".layer").classList.toggle("hidden");
	})
})