JSFiddle - React, Tailwind, and code Playground
HTML
<div class="contentLeft">
<ul>
<li><a class="selectBox" href="#">sample</a></li>
<li><a class="selectBox" href="#">sample1</a></li>
<li><a class="selectBox" href="#">sample2</a></li>
</ul>
</div>
<div class="contentRight">
<div class="selectBoxContent">its</div>
<div class="selectBoxContent">my</div>
<div class="selectBoxContent">way</div>
</div>
CSS
.contentLeft {
border:1px solid green;
width:30%;
float:left;
}
.contentRight {
border:1px solid red;
width:64%;
float:right;
height:400px;
}
.selectBoxContent {
width:100%;
height:100px;
background: #ccc;
display:none;
}
JavaScript
$(function() {
$('.selectBox').click(function() {
$('.selectBoxContent').toggle( "slide" );
return false;
});
});