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
$('.trigger').hover(function() {    
    var id = $(this).attr("data-code"); // Get the data from the hovered element
    $('.copy .wrapper:visible').fadeOut();
    $('#' + id).stop(true, true).show(); // Toggle the correct div    
    //Close button
    $('.copy .wrapper span').click(function() {
        $('.copy .wrapper').fadeOut();
    });
});

//If you delete this function, the wrappers can then be closed by clicking the close box
$('.trigger').mouseleave(function() {
     setTimeout(function () {
        $('.copy .wrapper').hide();
    }, 3000);
});