JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.1/css/bootstrap.min.css">
<div id="fit-grid" class="grid row clearfix">
  <a class="load-square span3" href="#" data-target="spring">
    <img src="http://www.fillmurray.com/200/200" />
    <h4 class="grid-title">Spring</h4>
  </a>
  <!-- .grid-square -->
  <a class="load-square span3" href="#" data-target="summer">
    <img src="http://www.fillmurray.com/200/200" />
    <h4 class="grid-title">Summer</h4>
  </a>
  <!-- .grid-square -->
  <a class="load-square span3" href="#" data-target="fall">
    <img src="http://www.fillmurray.com/200/200" />
    <h4 class="grid-title">Fall</h4>
  </a>
  <!-- .grid-square -->
  <a class="load-square span3" href="#" data-target="winter">
    <img src="http://www.fillmurray.com/200/200" />
    <h4 class="grid-title">Winter</h4>
  </a>
  <!-- .grid-square -->

</div>
<!-- #fit-grid -->

<div id="fit-carousel" class="grid-tabs tabbable" style="display: none;">
  <div class="container-fluid">
    <div class="clearfix">
      <ul id="fitTabs" class="nav nav-tabs">
        <li><a class="load-square" data-target="spring" data-toggle="tab">Spring</a></li>
        <li><a class="load-square" data-target="summer" data-toggle="tab">Summer</a></li>
        <li><a class="load-square" data-target="fall" data-toggle="tab">Fall</a></li>
        <li><a class="load-square" data-target="winter" data-toggle="tab">Winter</a></li>
        <li class="close"><a id="close-fit" href="#">Close</a></li>
      </ul>
    </div>
    <div id="fittingCarousel" class="carousel slide" data-interval="false">
      <div class="carousel-inner">
        <div class="active item">
          <img id="step-1" src="/images/fitting-image1.jpg" />
          <!--<img id="spring-img" src="http://www.fillmurray.com/1200/600"...

JavaScript

jQuery(function($) {

  $("#fit-grid .load-square").click(function() {
    var tablink = $(this).data('target');
    console.log(tablink);
    $("#fit-grid").fadeOut(
      function() {
        $('#fitTabs li').removeClass('active');
        $('#fitTabs a[data-target="' + tablink + '"]').parent('li').addClass('active');

        $("#fit-carousel").fadeIn();

        //swap images here
      });
    return false;
  });

  $("#close-fit").click(function(event) {
    $("#fit-carousel").fadeOut(
      function() {
        $("#fit-grid").fadeIn();
      }
    );
    return false;
  });

});