JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

<ol class="triggers">
    <li class="trigger one" data-code="one">trigger ONE</li>
    <li class="trigger two" data-code="two">trigger TWO</li>
    <li class="trigger three" data-code="three">trigger THREE</li>
    <li class="trigger four" data-code="four">trigger FOUR</li>
</ol>
<div class="copy">
    <div class="wrapper" id="one">ONE<span>&nbsp;</span></div>
    <div class="wrapper" id="two">TWO<span>&nbsp;</span></div>
    <div class="wrapper" id="three">THREE<span>&nbsp;</span></div>
    <div class="wrapper" id="four">FOUR<span>&nbsp;</span></div>
</div>

CSS

.trigger { width:200px; background:#ccc; margin-bottom:5px; cursor:pointer; }
.trigger:hover { background:#999; }
.copy .wrapper { display:none; width:320px; margin:0; padding:5px 25px 10px 5px; z-index:1; border:#666 1px solid; background:#fff; background:rgba(255,255,255,.85); }
.copy .wrapper span { float:right; width:20px; height:20px; background:#ccc; cursor:pointer; }
.copy .wrapper span:hover { background:#999; }
.copy .wrapper span:active { background:#000; }

JavaScript

//Show-Hide divs
var current;
$('.trigger').live('mouseenter', function() {    
    var id = current = $(this).data('code');
    $('#' + id).show().siblings().fadeOut();
}).live('mouseleave', function() {
    var id = $(this).data('code');
    current = null;
    setTimeout(function ()
    {
        if (current !== id) $('#' + id).hide(1);
    }, 3000);
});

//Close button
$('.copy .wrapper span').live('click', function() {
    $(this).closest('.wrapper').stop(true, true).fadeOut();
});