JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<button id="shower" name="buttonOne">Show</button>


<div id="menu">
    
    <ul>
        
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Portfolio</a></li>
        
    </u>
    
    
</div>

CSS

li {
    list-style-type:none;
}

a {
    text-decoration:none;
}

ul {
    padding:0;
}

#menu {
    display:none;
    animation:fadeIn 1s;
}

#buttonss {
    height:50px;
    width:50px;
    background-color:red;
}

@keyframes fadeIn {
    0% {
        opacity:0;
    }
    100% {
         opacity:1;   
    }
}

JavaScript

$(document).ready(function() {
    $('#shower').click(function() {
        if( $("#menu").css('display') == 'block') {
            $('#menu').css('display', 'none');
        } else {
            $('#menu').css('display', 'block');
        	
        }
        
    });
});