JSFiddle - React, Tailwind, and code Playground
HTML
<button id="show1" data-href="mission1">Mission</button>
<button id="show2" data-href="vission1">Vision</button>
<button id="show3" data-href="mteam">Management</button>
<div id="mission1" class="demo">Abcd</div>
<div id="vission1" class="demo">VVVVVVV</div>
<div id="mteam" class="demo">MMMMMMMMM</div>
CSS
#mission1
{
width:450px;
height:200px;
background:#069;
margin-top:10px;
display:none;
position:absolute; }
#vission1
{
width:450px;
height:200px;
background:#096;
margin-top:10px;
display:none;
position:absolute; }
#mteam
{
width:450px;
height:200px;
background:#CC3;
margin-top:10px;
display:none;
position:absolute; }
JavaScript
$('document').ready(function() {
$('#show1, #show2, #show3').click( function() {
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide();
$div.slideToggle();
});
});