JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<div class="" id="showDiv">show/hide</div>
<div class='divMain'>
    <lu class='divList'>
        <li>Link 1</li>
        <li>Link 1</li>
        <li>Link 1</li>
        <li>Link 1</li>
        <li>Link 1</li>
    </lu>
</div>

CSS

ul, li{width:100%}
.divMain {
    
    display:table;
    vertical-align: middle;
    height:100%;
    width:100%;
    border:1px solid red;
    position:absolute;
    background:#ffcc00;
}
.divList {
    padding:10px;
    text-align:center;
    display:table-cell;
    vertical-align: middle;
    height:500px;
  
    border:1px solid green;
}
.divList li {
    display:block;
    width:100%;
    padding:20px 0;
}

JavaScript

$(document).ready(function () {
    $("#showDiv").click(function () {
        var txt = 'Hide';
        $(".divMain").fadeToggle();

        if ($(".divMain").is(':visible')) {
            txt = 'Hide';
        } else {
            txt = 'Show';
        }

        $("#showDiv").html(txt);
    });

});