JSFiddle - React, Tailwind, and code Playground

by boctulus

HTML

<div class="testWrapper">

		<div id="div1a" onclick="toogle(this,'div2a');">
			<div>
				Click aquí 1
			</div>
		</div>
		
		<div id="div1b" class="div_1b_y2b">
			Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.
		</div>

<!-- ............................. -->

		<div id="div2a" onclick="toogle(this,'div1a');">
			<div>
				Click aquí 2
			</div>
		</div>
		
		<div id="div2b" class="div_1b_y2b">
			Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.
		</div>

	</div>

CSS

.testWrapper {
	width: 400px;
	height: auto;
	background: #272727;
	overflow: visible;
	padding: 50px;
	color: white;
}
.div_1b_y2b {
	position: relative;
	left: 10.3%;
	width: 79%;	
	border: 1px solid white;
	overflow: hidden;
	-webkit-transition: all ease 1s;
}

#div1b,#div2b {height: 0px;}

JavaScript

function toogle(me,other)
	{		
		other	= document.getElementById(other.replace(/a/, "b"));
		me		= document.getElementById(me.id.replace(/a/, "b"));
						
		if (me.clientHeight==0 && other.clientHeight==0){
			me.setAttribute("style","height: 160px");
		}else{	
			me.setAttribute("style","height: 160px");
			other.setAttribute("style","height: 0px");		
		}

	}