JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<ul>
    <li>Treatment Stuff</li>
    <li>Treatment Stuff</li>
    <li>Treatment Stuff</li>
    <li>Treatment Stuff</li>
    <li>Treatment Stuff</li>
    <li>Treatment Stuff</li>
    <li>Treatment Stuff</li>
</ul>

<button>Change Stuff</button>

CSS

li {
    border: 5px solid red;
    margin: 5px;
}

.treatment-calculator {
    display: block;
    xheight: 0;
}

.treatment-calculator.is-hidden {
    xdisplay: none;
}

JavaScript

var $ul = $('ul');

$ul.on('change', function (event) {
    $ul.find('li').each(function (i, item) {
        // Declare our variables
        var treatmentCalculator;
        
        // If a treatment calculator link isn't already present...
        if (!$(item).find('.treatment-calculator').length) {
                
            // Create the treatment calculator link
            var treatmentCalculator = $('<a />', {
                'class': 'treatment-calculator is-hidden',
                href: 'http://google.com',
                text: 'Treatment Calculator'
            });
            
            // Add it to our item
            $(item).append(treatmentCalculator);
            
            treatmentCalculator.slideUp(0);
        }
    });
    
    $ul.on('mouseenter', 'li', function (event) {
        $(event.currentTarget).find('.treatment-calculator')
            .removeClass('is-hidden')
            .slideDown('fast');
    });
    
    $ul.on('mouseleave', 'li', function (event) {
        $(event.currentTarget).find('.treatment-calculator')
            .addClass('is-hidden')
            .slideUp('fast');            
    });
});
    
// $ul.trigger('change');
    
$('button').on('click', function (event) {
    $ul.trigger('change');
});