JSFiddle - React, Tailwind, and code Playground

by dsummersl

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
      <div class="col-xs-4">
        <h4>Example heading</h4>
        <ul class="list-group">
          <li class="list-group-item hoverable" data-image="#chair1">Chair 1</li>
          <li class="list-group-item hoverable" data-image="#chair2">Chair 2</li>
        </ul>
      </div>
    <div class="col-xs-8" id="images">
      <a href="#" id="chair1" class="thumbnail" style="display:none;">
      <img src="http://www.southfieldfurniture.net/images/chairs-full/108-1.jpg" alt="...">
      </a>
      <a href="#" id="chair2" class="thumbnail" style="display:none;">
      <img src="http://www.southfieldfurniture.net/images/chairs-full/102-1.jpg" alt="...">
      </a>
    </div>
  </div>
</div>

JavaScript

$(".hoverable")
	.hover(function() {
  	$("#images a").hide();
  	$($(this).data("image")).show("slow");
  });