JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<div id="wrap">
    <div id="playlist">If you're hovering this div when it should auto-collapse it will silently abort the auto-collapse. How considerate && awesome is this, huh?!</div>
</div>

CSS

#wrap {position: fixed; bottom: 0; width: 100%;}
#playlist {height: 120px; border: 1px solid #777; padding: 3px 5px; position: relative; bottom: 0; background: #DADADA;}

JavaScript

isAutoCollapse = true;

var playlist = $('playlist');
var isHoverOnPlaylist = false;

if(isAutoCollapse) {
    
    var turnHoverFlagOn = function(){
         isHoverOnPlaylist = true;
     };
     
     var turnHoverFlagOff = function(){
         isHoverOnPlaylist = false;
     };
    
    playlist.addEvents({
        'mouseenter': turnHoverFlagOn,
        'mouseout': turnHoverFlagOff
    });
}


var collapse = function(){
    if(!isHoverOnPlaylist){
        go();
    }
    playlist.removeEvent('mouseenter', turnHoverFlagOn);
    playlist.removeEvent('mouseout', turnHoverFlagOff);
}.delay(1500);

function go(){
    $('playlist').tween('bottom', [0, -102]);
}