JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    
    <button data-text-swap="Show" id="trigger">Hide</button>
    <!-- <a href="#" id="trigger">Open me</a> -->
    
    <div id="drop">
        
        <a href="#">Menu item 1</a>
        <a href="#">Menu item 2</a>
        <a href="#">Menu item 3</a>
        <a href="#">Menu item 4</a>
       
    
    </div>
    
</div>

CSS

.container {
    position:relative;
}

#trigger {
    color:#333;
    display:block;
    float:left;
    font-family:Helvetica, Arial, sans-serif;
    font-weight:bold;
    font-size:12px;
    padding:5px 10px;
    text-decoration:none;
    border:1px solid #CCC;
    margin:20px;
    border-radius:3px;
}

#drop {
    display:none; /* Hide it first of all */
    background:#F8F8F8;
    border:1px solid #CCC;
    box-shadow:0 1px 3px rgba(0,0,0,0.15);
    position:absolute;
    top:46px;
    left:20px;
    width:200px;
    border-radius:3px;
}

#drop a {
    color:#333;
    display:block;
    padding:5px 10px;
    font-family:Helvetica, Arial, sans-serif;
    font-size:12px;
    text-decoration:none;
}

#drop a:hover {
    background:#333;
    color:#FFF;
}

JavaScript

$(document).ready( function(){

    $('#trigger').click( function(event){
        
        event.stopPropagation();
        
        $('#drop').toggle();
        
    });
    
    $(document).click( function(){

        $('#drop').hide();

    });
    
    $("button").on("click", function() {
  
        var el = $(this);
  
        if (el.text() == el.data("text-swap")) {
    
            el.text(el.data("text-original"));} 
        else {
    
            el.data("text-original", el.text());
    
            el.text(el.data("text-swap"));}
});

});