JSFiddle - React, Tailwind, and code Playground

by Alexis López Espinoza

HTML

<section>
	<span class="button">Mostrar/Ocultar panel 1</span>
	<span class="button">Mostrar/Ocultar panel 2</span>
	<span class="button">Mostrar/Ocultar panel 3</span>
</section>

<section>
	<div class="panel">Panel 1</div>
	<div class="panel">Panel 2</div>
	<div class="panel">Panel 3</div>
</section>

CSS

section{
	text-align: center;
}

.button{
	cursor: pointer;
	display: inline-block;
	border: .1rem solid;
	border-radius: .5rem;
	padding: .15rem .25rem;
	margin: .1rem;
	background-color: orange;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
}

.button:hover{
	filter: brightness(1.2);
	-webkit-filter: brightness(1.2);
	-moz-filter: brightness(1.2);
	-o-filter: brightness(1.2);
}

.panel{
	border: .1rem solid;
	width: 50%;
	margin: 0 auto;
	margin-bottom: 1%;
	margin-top: 1%;	
	text-align: center;
	display: none;
}

.panel:nth-child(even){
	background-color: yellow;
}

.panel:nth-child(odd){
	background-color: cyan;
}

JavaScript

$(".button").on("click", function(){
	var posBut = $(".button").index(this),
		panel = $(".panel").eq(posBut),
		aux;
	
	if (aux = $(".visible")){
		aux.removeClass("visible").slideToggle();
	}
	
	if (aux[0] != panel[0]){
		panel.addClass("visible").slideToggle();
	}
});