JSFiddle - React, Tailwind, and code Playground

by Ravindra Athreya

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-xs-4" data-target = '1-content'>
      post 1  
    </div>
    <div class="col-xs-4" data-target = '2-content'>
       post 2  
    </div>
    <div class="col-xs-4" data-target = '3-content'>
       post 3    
    </div>
</div>
<div class='row'>
    <div class='col-xs-12 explanation hidden 1-content'>Post 1 description</div>
    <div class='col-xs-12 explanation hidden 2-content'>Post 2 description</div>
    <div class='col-xs-12 explanation hidden 3-content'>Post 3 description</div>
<div>
    
<div class="row">
    <div class="col-xs-4" data-target = '4-content'>
      post 4  
    </div>
    <div class="col-xs-4" data-target = '5-content'>
       post 5  
    </div>
    <div class="col-xs-4" data-target = '6-content'>
       post 6    
    </div>
</div>
<div class='row'>
    <div class='col-xs-12 explanation hidden 4-content'>Post 4 description</div>
    <div class='col-xs-12 explanation hidden 5-content'>Post 5 description</div>
    <div class='col-xs-12 explanation hidden 6-content'>Post 6 description</div>
<div>

CSS

.col-xs-4{
    border:1px solid black;
}

.col-xs-12{
   border:1px solid black; 
}

.hidden{
    display: none;
}

JavaScript

$('.col-xs-4').click(function(e){
    var $target = $(e.currentTarget);
    $('.explanation').hide();
    var targetClass = $target.attr('data-target');
    $('.'+targetClass).removeClass('hidden').hide().slideDown();
});