JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
		<section id="employees" class="text-center">
		<ul id="employee_list" class="list-unstyled list-inline">
		
			<li class="employee_info">
				<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse1"><img src="http://placehold.it/175x175" width="175" height="175" class="img-circle employee_mugshot" alt="Charles B. Hicks"></a>
				<h2>Charles B. Hicks<br><small>Owner</small></h2>
			</li>
		
			<li class="employee_info">
				<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse4"><img src="http://placehold.it/175x175" width="175" height="175" class="img-circle employee_mugshot" alt="Kathleen Kirk"></a>
				<h2>Kathleen Kirk<br><small>Design Consultant</small></h2>
			</li>
		
			<li class="employee_info">
				<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse2"><img src="http://placehold.it/175x175" width="175" height="175" class="img-circle employee_mugshot" alt="Carlos Martinez"></a>
				<h2>Carlos Martinez<br><small>Project Manager</small></h2>
			</li>
		
			<li class="employee_info">
				<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse3"><img src="http://placehold.it/175x175" width="175" height="175" class="img-circle employee_mugshot" alt="Phil McKenzie"></a>
				<h2>Phil McKenzie<br><small>Project Manager</small></h2>
			</li>
		
		</ul>
		
		<div id="collapse1" class="collapse employee-collapse employee_bio">
			<h3>Charles B. Hicks / <span>Owner</span></h3>
			<p>&quot;Chuck&quot; holds a Mechanical Engineering degree from the University of South Carolina and an MBA from Ohio State University. He is a Certified Green Professional, Certified Aging-in-Place Specialist and EPA Certified Lead Renovator.

His ability to estimate, schedule, and meet client objectives stems...

CSS

#employee_list li a img {
  border: none;
  opacity: .5;
  filter: alpha(opacity = 25);
  -webkit-transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -o-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  }
#employee_list li a:hover img, #employee_list li a img.active {
  opacity: 1;
  filter: alpha(opacity = 50); /* for IE */
  }

JavaScript

// Allow employee bio hide/show to only show one bio at a time
$(".employee-collapse").on("show.bs.collapse", function(e) {
  $(".employee-collapse").not(e.target).each(function(i, el){
    if ($(el).is(":visible"))
      $(el).collapse('hide');
  });
});

// Add class of "active" when you click on an employee mugshot, remove it when you click another mugshot
$('.employee_mugshot').click(function() {
      $(".employee_mugshot").not(this).removeClass("active");
      $(this).toggleClass('active');
});