JSFiddle - React, Tailwind, and code Playground

by George Berkeley

HTML

<div class="testWrapper">

		<div id="div1a" onclick='mostrar(this.id)'>
			<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="mostrar(this.id)">
			<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%;
	height: 0;
	border: 1px solid white;
	overflow: hidden;
	-webkit-transition: all ease 1s;
}

JavaScript

var div1a = document.getElementById("div1a");
	var div1b = document.getElementById("div1b");

	var div2a = document.getElementById("div2a");
	var div2b = document.getElementById("div2b");

	var clicadoA = false;
	var clicadoB = false;


	function mostrar(ID)
	{
		if ( (ID == "div1a") && (clicadoA == false) )
		{
			clicadoA = true;
			div1b.style.height = "160px";
			div1a.removeAttribute('onclick');
			div1a.setAttribute('onclick', 'esconder(this.id)');

			div2b.style.height = "0px";

		}
		else if ( (ID == "div2a") && (clicadoB == false) )
		{
			clicadoB = true;
			div2b.style.height = "260px";
			div2a.removeAttribute('onclick');
			div2a.setAttribute('onclick', 'esconder(this.id)');

			div1b.style.height = "0px";
		}
	}

	function esconder(ID)
	{
		if ( (ID == "div1a") && (clicadoA == true) )
		{
			clicadoA = false;
			div1b.style.height = "0px";
			div1a.removeAttribute('onclick');
			div1a.setAttribute('onclick', 'mostrar(this.id)');
		}
		else if ( (ID == "div2a") && (clicadoB == true) )
		{
			clicadoB = false;
			div2b.style.height = "0px";
			div2a.removeAttribute('onclick');
			div2a.setAttribute('onclick', 'mostrar(this.id)');
		}
	}