JSFiddle - React, Tailwind, and code Playground

by hh54188

HTML

<div class="top-menu-contain">
        <div class="pull-button" ><a href="#">Show Me</a></div>
        <div class="pull-button"style="display: none;"><a href="#">Hide Me</a></div>
    </div>

CSS

*{ margin:0; padding:0;}
        .top-menu-contain
        {   
            background:black;
            width:400px;
            height:100px;
            margin:0 auto;
            position:fixed;
            top:-100px;
            margin:0 auto;
           
            border-width:0 45px 45px; 

        }
        .pull-button
        {
            background:red;
            width:100px;
            height:30px;
            margin:0 auto;
            
            position:absolute;
            bottom:-30px;
            left:150px;
        }
        .pull-button a 
        {
            color:black;
            font-size:20px;
            font-weight:bold;
            position:relative;
            text-decoration:none;
            text-align:center;
        }

JavaScript

$('.pull-button a').toggle(function () {
                $('.top-menu-contain').animate({ top: '+=100px' }, 'slow');
                $("div.pull-button").toggle();
            }, function () {
                $('.top-menu-contain').animate({ top: '-=100px' }, 'slow');
                $("div.pull-button").toggle();
            });