JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<ul id="widget">
    <li>
        <button>Display Content</button>
        <div class="content">This is my content!</div>
    </li>
    
    <li>
        <button>Display Content</button>
        <div class="content">This is my content!</div>
    </li>
    
    <li>
        <button>Display Content</button>
        <div class="content">This is my content!</div>
    </li>
    
    <li>
        <button>Display Content</button>
        <div class="content">This is my content!</div>
    </li>
    
    <li>
        <button>Display Content</button>
        <div class="content">This is my content!</div>
    </li>
</ul>

CSS

li {
    border: 3px double #000;
    float: left;
    margin: 0 0 1em;
    padding: 1em;
    width: 400px;
}

button {
    clear: left;
    float: left;
}

.content {
    border: 1px solid red;
    float: left;
}

JavaScript

// A quick demo of how to use contextual jQuery to make a simple widget
// The requirements were that list items with a button and a content div
// inside each one display the content on mouseenter and hide it 
// on mouseleave

(function( $ ) {
    
    $( document ).ready(function() {
        
        // Cache a reference to #widget for efficiency's sake
        var $widget = $( '#widget' ),
            // our timeout to ensure actual intent to hover
            hoverIntent;
        
        $widget.find( '.content' ).hide();
        
        $widget.delegate( 'button', 'mouseenter', function( event ) {
            
            var $button = $( event.target ),
                $content = $button.next( '.content' );
           
            clearTimeout( hoverIntent );
            
            hoverIntent = setTimeout(function() {
                $content.fadeIn( 'slow' );
            }, 250);
       
        });
        
        $widget.delegate( 'button', 'mouseleave', function( event ) {

            var $button = $( event.target ),
                $content = $button.next( '.content' );
            
            clearTimeout( hoverIntent );
            
            $content.fadeOut( 'slow' );
            
        });

    });
    
})( jQuery );