JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

<ul class="buttons">
  <li><a class="showvid" data-target="1">Div 1</a>

  </li>
  <li><a class="showvid" data-target="2">Div 2</a>

  </li>
  <li><a class="showvid" data-target="3">Div 3</a>

  </li>
</ul>
<div id="div1" class="targetDiv">
  <iframe src="http://player.vimeo.com/video/31683374?title=0&amp;byline=0&amp;portrait=0"
  width="600" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen
  allowFullScreen></iframe>
</div>
<div id="div2" class="targetDiv" style="display:none;">
  <iframe src="http://player.vimeo.com/video/32602614?title=0&amp;byline=0&amp;portrait=0"
  width="600" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen
  allowFullScreen></iframe>
</div>
<div id="div3" class="targetDiv" style="display:none;">
  <iframe src="http://player.vimeo.com/video/44755634?title=0&amp;byline=0&amp;portrait=0"
  width="600" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen
  allowFullScreen></iframe>
</div>

CSS

.targetDiv {
  width:600px;
  height:338px;
  background-color:gray;
}

JavaScript

$(function () {
  $('.showvid').click(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
  });
});