JSFiddle - React, Tailwind, and code Playground

by Kiwoong Jang

HTML

<div id="serverStatus">
    <h1>서버현황</h1>
    <ul>
        <li class="good">
            <span>베니카<em>원활</em>
        </li>
        <li class="normal">
            <span>아가사</span><em>양호</em>
        </li>
        <li class="hot">
            <span>카로라</span><em>혼잡</em>
        </li>
    </ul>
    <span class="more">+</span>
</div>

CSS

* { font-family: dotum; color: #adafae; font-style: normal; }

#serverStatus { position: relative; width: 265px; height: 50px; background: #35364b; overflow: hidden; }
#serverStatus h1 { float: left; }
#serverStatus ul { float: left; padding: 11px 0 14px; }
#serverStatus ul li { padding: 8px 0 7px; font-size: 0; line-height: 1; }
#serverStatus ul li span { font-size: 12px; }
#serverStatus ul li em { display: none; padding: 0 0 0 9px; font-size: 11px; }
#serverStatus ul li.good em { color: #57ac37; }
#serverStatus ul li.normal em { color: #e0ba00; }
#serverStatus ul li.hot em { color: #cc6700; }
#serverStatus span.more { position: absolute; top: 22px; right: 14px; cursor: pointer; }
#serverStatus span.on { background: red; }

JavaScript

$(function() {
    var wrap = $("#serverStatus");
    var item = wrap.children("ul").find("li");
    var more = wrap.children("span.more");
    var show_speed = 500;
    var hide_speed = 400;
    var hide_delay = 3000;
    var timer = null;
    
    wrap.bind("selectstart", function() { return false; });
    item.not(":first").hide();
    show();
    hide(true);
    
    wrap.hover(function(event) {
        event.stopPropagation();
        if(timer) {
            clearTimeout(timer);
            timer = null;
        }
    }, function(event) {
        event.stopPropagation();
        if(!timer) {
            hide(true);
        }
    });
    
    more.click(function(event) {
        event.preventDefault();
        if(item.is(":hidden")) {
            show();
        } else {
            hide();
        }
    });
    
    function show() {
        wrap.stop();
        wrap.animate({ height: 102 }, show_speed );
        item.fadeIn(show_speed);
        item.find("em").fadeIn(show_speed, function() { more.addClass("on"); });
    };
    function hide(auto) {
        if(!timer && auto) {
            timer = setTimeout(function () {
                hide();
            }, hide_delay);
            return;
        }
        
        wrap.stop();
        wrap.animate({ height: 50 }, hide_speed, function() { timer = null });
        item.not(":first").fadeOut(hide_speed);
        item.find("em").fadeOut(hide_speed, function() { more.removeClass("on"); });
    };
});