JSFiddle - React, Tailwind, and code Playground

by TrinhThang

HTML

<div id="tableDiv" class="dropdown">
    <button id="tableButton" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Table
        <span class="caret"></span>
    </button>
    <ul id="tableMenu" class="dropdown-menu">
        <li><a href="#">Att1</a></li>
        <li><a href="#">Att2</a></li>
        <li><a href="#">Att3</a></li>
    </ul>
</div>

CSS

ul{
  display:none;
}

#tableDiv.active  ul{
  display: block;
}

JavaScript

$("#tableButton").click(function(e){
    $(this).parent().toggleClass('active');
});

$("#tableMenu a").click(function(e){
    e.preventDefault(); // cancel the link behaviour
    var $this = $(this)
    var selText = $this.text();
    $("#tableButton").text(selText);
    $this.addClass('aaa');
    $('#tableDiv').toggleClass('active');
    console.log(selText);
});