JSFiddle - React, Tailwind, and code Playground
HTML
<div class="head">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="content">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="head">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="content">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="head">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="content">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="head">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<div class="content">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>
CSS
.head>div{
width:50px;
height:50px;
margin:5px 5px 0 5px;
background:grey;
float: left;
}
.head>div:nth-child(4){
clear:right;
}
.head>div.selected{
background:red;
height:55px;
}
.content{
display:none;
background:blue;
width:230px;
height:100px;
margin:0 5px;
padding:0;
}
.content>div{
display:none;
width:100%;
height:100%;
background:red;
}
.content .show{
display:block;
}
.head{
display:block;
height:60px;
margin:0;
}
JavaScript
$('.head>div').click(function(e)
{
var index = $(this).index();
var $targetContent = $(this).parent().next('.content');
if($(this).hasClass('selected')){
$(this).removeClass('selected');
$targetContent.hide();
return false;
}
$(this).parent().find('.selected').removeClass('selected');
$(this).addClass('selected');
$targetContent.show();
$targetContent.find('div.show').removeClass('show');
$targetContent.find('div:eq('+index+')').addClass('show');
});