JSFiddle - React, Tailwind, and code Playground

HTML

<button id="toggle-box">toggle</button>
<div id="box" style="display:none;" ><img src="http://dcalvitti.altervista.org/images/div2.png"></div>
<button id="toggle-box2">toggle</button>
<div id="box2" style="display:none;"><img src="http://dcalvitti.altervista.org/images/div1.png"></div>
 <button id="toggle-box3">toggle</button>
 <div id="box3" style="display:none;" ><img src="http://dcalvitti.altervista.org/images/DIV3.png"></div>

CSS

#box {
    background-color: #ffffff;
    height:400px;
    width: 1200px;
	position: absolute;
	top:30px;
	z-index:1;
	}
	#box2 {
    background-color: #ffffff;
    height:400px;
    width: 1200px;
	position: absolute;
	top:30px;
	z-index:2;
	background-color : transparent;
		  }
		  #box3 {
    background-color: #ffffff;
    height:400px;
    width: 1200px;
	position: absolute;
	top:30px;
	z-index:2;
	background-color : transparent;
		  }
 	 body {background-color:#c0c0c0; }

JavaScript

$('#toggle-box').click().toggle(function() {
    $('#box').animate({ width: 'show' });
}, function() {
    $('#box').animate({ width: 'hide' });
});

$('#toggle-box2').click().toggle(function() {
    $('#box2').animate({ width: 'show' });
}, function() {
    $('#box2').animate({ width: 'hide' });
});
	$('#toggle-box3').click().toggle(function() {
    $('#box3').animate({ width: 'show' });
}, function() {
    $('#box3').animate({ width: 'hide' });
});