JSFiddle - React, Tailwind, and code Playground

by chrisloughnane

HTML

<div class="company" id="company_1">
<p>some content goes here - first</p>
</div>

<div class="company" id="company_2">
<p>some content goes here - second</p>
</div>

<div class="company" id="company_3">
<p>some content goes here</p>
</div>

<div id="company_container">
 <a title="1" href="#"><img data-title="#company_1" src="http://portfolio.chrisloughnane.net/images/nuigconnect.png" /></a>
 <a title="2" href="#"><img data-title="#company_2" src="http://portfolio.chrisloughnane.net/images/humanisingthemachine.png" /></a>
 <a title="3" href="#"><img data-title="#company_3" src="http://portfolio.chrisloughnane.net/images/trazapp.png" /></a>
</div>

JavaScript

$(document).ready(function(){

  $('.company').not(':first').hide();

  $('#company_container img').hover(function(){

    var contenttoShow = $(this).attr('data-title');

    contenttoShow2 = $(contenttoShow);
    $('.company').hide();
    contenttoShow2.fadeIn(500);
  });

});