Open and Close Bottom Menu

by jme11

HTML

<a href="javascript: void(0);">open</a>
<div id="control" style="max-width: 200px;">
    <div id="description" class="description">lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
</div>

CSS

#control {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 25px;
    background-color: rgba(0,0,0, 0.05);
}

.description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(0,0,0, 0.2);
    color: rgb(255,255,255);
    padding: 0 10px;
    height: 25px;
    transition: height .5s ease;
    text-align: center;
}

.description.expand {
    overflow: hidden;
    text-overflow: initial;
    white-space: normal;
}

JavaScript

$(function(){
    $("a").on("click", function(){
        $el = $("#description");
        
        if ($el.hasClass("expand")) {
            $el.css({height: ""});
            
            setTimeout(function(){
                $el.removeClass("expand");
            }, 200);
        } else {
            
            $el.removeClass("description");
            var h = $el.css("height");
            $el.addClass("description");
            
            setTimeout(function(){
                $el.addClass("expand").css("height", h);
            }, 200);
            
            
        }
        
    });
});