JSFiddle - React, Tailwind, and code Playground

by UI Designer

HTML

<div class="fixed-blocks">
<div class="heading-blocks"> Heading </div>

   fixed block content
</div>

CSS

.heading-blocks {
    background: none repeat scroll 0% 0% #333;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.79) inset;
    overflow: hidden;
    color:#FFF;
    padding:10px
}

.fixed-blocks {
    position: fixed;
    width: 100%;
    bottom: 0px;
    background: none repeat scroll 0% 0% #FFF;
    padding: 0px 0px 5px;
    z-index: 3;
}

JavaScript

$('.fixed-blocks').animate({'height':'31px'},{duration: 2500});

$('.heading-blocks').mouseover((function() {        
    var i = 0;
    return function() {
      		 $('.fixed-blocks').animate({
            height: (i++ % 2) ? 31 : 140
        }, 200);	
    }
})());