JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<div class="blocks" id="animate-test">
<a href="">A test</a>
</div>
<div class="one"></div>
<!--this acts as a placeholder over the 5px border, it will be a dropshadow img-->
<div id="dropshadow"></div>

CSS

#animate-test { 
    position:fixed; 
    top:0px; 
    float:left; 
    background-color:#333; 
    z-index: 100; 
    height:55px;
    width:100%;
}
.one { 
    position:relative; 
    width: 100%; 
    height: 0px; 
    display: block; 
    top:55px; 
    float:left; 
    background-color:#eaeaea; 
    z-index: 50; 
    border-bottom: solid 5px #333; 
}
#dropshadow { 
    position:fixed;
    width:100%;
    z-index:9999;
    top:55px;
    background-color:#459911;
    height:5px;
}
#animate-test a {
    padding: 0px 0px 0px 0px;
}
* { 
    padding: 0px; 
    margin: 0px;
}

JavaScript

//Wolff Olins Dropdown simulation test 1

//$(function() {
//$("#animate-test a").hover(function(){
//   $(".one").filter(':not(:animated)').animate( { height: "105px" } ) 
//    .addClass( "dropdown" );
//}, function() {
//    $(".one").animate({ height: "0px" });
//});
//$(".one").hover(function(){
//   $(".one").filter(':not(:animated)').animate({ height: "105px" });
//}, function() {
//    $(".one").animate({ height: "0px" });
//});
//});

//var isOpen = true;

//  $('#animate-test a, .one').hover(function() {
//    isOpen = !isOpen; 
//    if(isOpen) {
//      $('.one').animate({ height: '0' }, 500, function() {}); 
//    } else { 
//      $('.one').animate({ height: '105' }, 500, function() {}); 
//    };
//  });

//    $("div.enterleave").mouseenter(function(){
//      $("p:first",this).text("mouse enter");
//      $("p:last",this).text(++n);
//    }).mouseleave(function(){
//      $("p:first",this).text("mouse leave");
//    });

// the above are virtually and not what I wanted •_• below is good!

$("#animate-test a").mouseenter(function(){
        $(".one").filter(':not(:animated)').animate({height: "105px"});       
    }).mouseleave(function(){
      $(".one").animate({ height: "105px" });
    });
    $(".one").mouseenter(function(){
        $(".one").filter(':not(:animated)').animate({height: "105px"});       
    }).mouseleave(function(){
      $(".one").animate({ height: "0px" });
    });