JSFiddle - React, Tailwind, and code Playground

HTML

<div id="botonera" style="background:transparent;display:block;width:100%;height:40px;">
    <div id="boton1" style="background:yellow;display:block;width:100px;height:40px; color:white; float:left;" onclick="">Boton</div>
    <div id="boton2" style="background:green;display:block;width:100px;height:40px; color:white; float:left;">Boton</div>
    <div id="boton3" style="background:orange;display:block;width:100px;height:40px; color:white; float:left;">Boton</div>
</div>

<div id="cuerpomenu" style="background:grey;width:100%;height:auto;">

    <div id="contenidomenu1" style="background:black;display:none;width:100%;height:300px;"></div>
    <div id="contenidomenu2" style="background:blue;display:none;width:100%;height:300px;"></div>
    <div id="contenidomenu3" style="background:orange;display:none;width:100%;height:300px;"></div>

</div>

<div id="cuerpositio" style="background:red;width:100%;height:300px;">
	<p>AQUI VA EL CONTENIDO DE LA WEB</p>
</div>

JavaScript

$('#boton1').click(function() {
        hide_menu();
		$('#contenidomenu1').slideToggle(300);
	});
	
	$('#boton2').click(function() {
        hide_menu();
		$('#contenidomenu2').slideToggle(300);
	});
	
	$('#boton3').click(function() {
        hide_menu();
		$('#contenidomenu3').slideToggle(300);
	});
function hide_menu(){
    $("#cuerpomenu > div").hide();
}