JSFiddle - React, Tailwind, and code Playground

by Simon Price

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
      <div class="imagebox" data-target="simon">
        <a href="#hola">
          <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
          <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
        </a>
      </div>
      <div class="comments">
      
      </div>
      <div class="offset-md-5 offset-sm-4 offset-5 bio-container">
      <div class="bio first">
         
      </div>
      </div>
      
    </div>    
      <div class="col-sm-4">
      <div class="imagebox"  data-target="vinnie">
        <a href="#hola">
          <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
          <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
        </a>
      </div>
      <div class="comments">
      
      </div>
      <div class="offset-md-5 offset-sm-4 offset-5">
      <div class="bio second">
         
      </div>
      </div>
      
    </div>    
      <div class="col-sm-4">
      <div class="imagebox" data-target="stuart">
        <a href="#hola">
          <img src="//placeimg.com/400/400/animals"  class="category-banner img-fluid">
          <span class="imagebox-desc">Lorem ipsum dolor sit amet!</span>
        </a>
      </div>
      <div class="comments">
      
      </div>
      <div class="offset-md-5 offset-sm-4 offset-5">
      <div class="bio third">
         
      </div>
      </div>
      
    </div>
    </div>
    <div class="row">
    <div class="col-md-12 col-sm-12 col-12">
      <div...

CSS

.bio {
  margin-top: 15px;
    margin-left: 15px;
    background: #FFFFFF;
    /*border: 1px solid #CAD5E0;*/
    border-radius: 8px;
    position: absolute;
    z-index: 9
}

.bio-text {
    margin-top:4px;
    width: 97%;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    border-radius: 8px;
    min-height: 300px
    
}

.bio:after {
content: '';
display: block;
position: absolute;
top: -11px;
width: 30px;
height: 30px;
    background: #FFFFFF;
    border-right:1px solid #CAD5E0;
    border-top:1px solid #CAD5E0;

 -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
}

.first, .second, .third, .fourth, .bio-text, .bio-text-value{
  display: none;
}

.imagebox {
  padding: 0px;
  position: relative;
  text-align: center;
  width: 100%;
}

.imagebox img {
  opacity: 1;
  transition: 0.5s opacity;
    border-radius: 8px

}

.imagebox .imagebox-desc {
  background-color: #ffffff;
  bottom: 0px;
  color: #000000;
  font-size: 1.2em;
  left: 0px;
  padding: 10px 15px;
  position: absolute;
  transition: 0.5s padding;
  text-align: center;
  width: 100%;
  opacity: 0.5;

}

.imagebox:hover img {
  opacity: 0.9;
}

.imagebox:hover .imagebox-desc {
  padding-bottom: 10%;
  opacity: 0.9;
}

.imagebox.active .imagebox-desc {
  padding-bottom: 0%;
  opacity: 0.9;
  background-color: #000000;
}

JavaScript

$(document).ready(function(){
	$(".imagebox").on('click', function(){
  
  var obj = $(this);
        console.log(obj)
        
        $('.active').removeClass('active')
        
        obj.toggleClass('active')

      var bio = $(obj).siblings().find('.bio');
      var dataTarget = $(obj).data("target")
      var parent= $("#" + dataTarget).parents('.bio-text')    
      var target = $("#" + dataTarget)
      var parentId = parent.id;
      
  		if ( parent.is(':visible') && target.is(':visible')){
       	$('.bio').hide('slow');
      	$('.bio-text').hide('slow');     
      	$('.bio-text-value').hide('slow');
  		}
      else{
      	$('.bio').hide();
        $('.bio-text').hide();     
        $('.bio-text-value').hide();
        
        console.log(parent)
      	target.fadeIn('fast')
      	bio.fadeIn('slow');
      	target.fadeIn('slow');
      	parent.fadeIn('slow')
      }
  })  
})