JSFiddle - React, Tailwind, and code Playground

by JuanMa

HTML

<div class="contenedor">
<h2>PRIMER MARCO</h2>
<button class="boton" type="button"> Contenido</button>
<div class="cortina">
  <p>Contenido primer marco</p>
</div>
</div>

<div class="contenedor">
<h2>SEGUNDO MARCO</h2>
<button class="boton" type="button"> Contenido</button>
<div class="cortina">
  <p>Contenido segundo marco</p>
</div>
</div>

CSS

.contenedor{position:relative;width: 300px;float:left;display:inline-block;border:0px solid #000;margin: 20px;}
.boton:before{content:"Mostrar";}
.active:before{content:"Ocultar";}

JavaScript

$(document).ready(function(){
	$(".cortina").hide(); 
	$("button.boton").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
		return false; 
	});
});