JSFiddle - React, Tailwind, and code Playground

Hover & Click

by Jennifer Perrin

HTML

<ul id="my-list">
    <li>Am I right?
        <div>Yugi....</div>             
    </li>
    <li>But am I right?!
        <div>Yugi...</div>            
    </li>
    <li>Yugi, for the last time!
        <div>Tell Me!</div>            
    </li>
</ul>

CSS

ul#my-list div {
    height: 50px;
    background-color: #ddd;
}

ul#my-list li.hover {
    background-color: #ffde8e;
}

JavaScript

$("ul#my-list li div").hide();

$("ul#my-list li").on({
    mouseenter : function() {
        $(this).addClass("hover");
    },
    mouseleave : function() {
        $(this).removeClass("hover");
    },
    click      : function() {
        var obj = $(this),
            div = obj.children("div");
        
        if(div.is(":visible")) {
            div.slideUp();
            obj.removeClass("hover");
        } else {
            div.slideDown();
        }
    }
});