JSFiddle - React, Tailwind, and code Playground

by Wolf Wortmann

HTML

<button class="ddbtn" >click</button>
<article class="art">Box</article>

<button class="ddbtn" >click</button>
<article class="art">Box</article>

<button class="ddbtn" >click</button>
<article class="art">Box</article>

<button class="ddbtn" >click</button>
<article class="art">Box</article>

<button class="ddbtn" >click</button>
<article class="art">Box</article>

CSS

article{
   color: #FFF;
   background-color: rgba(28,28,28, 1);
   margin-bottom: 40px;
   height: auto;
}

JavaScript

window.onload=function(){
	var article = document.getElementsByClassName("art");
	var butn = document.getElementsByClassName("ddbtn");
    alert(article +" || "+butn);
	for (var i = 0; i < butn.length; i++){
		butn[i].onclick=function(){
			if (article[i].style.height != "auto") {
				article[i].style.height = "auto";
			}
			else{
				article[i].style.height = "52px";
			}
			
		};
	};
};