JSFiddle - React, Tailwind, and code Playground

by amitava82

HTML

djbfnsd
df 
s
f
sd f<br /><br /><br /><br /><br /><br /><br />

<table width="100%">
    <tr>
               <td  class="small">
            <div class="menu">
                <ul>
                    <li><a href="">item1</a></li>
                    <li><a href="">item1</a></li>
                    <li><a href="">item1</a></li>
                </ul>
            </div>
        </td> 
        <td>col2</td>
        <td>col3</td>
        <td>col4</td>
        <td>col5</td>

    </tr>
    <tr>
                <td  class="">
            <div class="menu">
                <ul>
                   <li><a href="">item1</a></li>
                    <li><a href="">item1</a></li>
                    <li><a href="">item1</a></li>
                </ul>
            </div>
        </td> 
        <td>col2</td>
        <td>col3</td>
        <td>col4</td>
        <td>col5</td>

    </tr>
    <tr>
                <td  class="">
            <div class="menu">
                <ul>
                    <li><a href="">item1</a></li>
                    <li><a href="">item1</a></li>
                    <li><a href="">item1</a></li>
                </ul>
            </div>
        </td> 
        <td>col2</td>
        <td>col3</td>
        <td>col4</td>
        <td>col5</td>

    </tr>    
  
</table>

CSS

table{
position: relative;
}
td{
    maegin: 5px;
    padding: 3px;
}
.odd{
    background-color: #E9F4FF;
    border: 1px solid #1F75CC;
}
.menu{
    display: none;
    position: absolute;
    background-color: #E9F4FF;
    padding: 10px;
    margin-top: 13px;
    border: 1px solid #1F75CC;
    border-top: none;
}

.small{
    width: 10px;
}

JavaScript

$('tr').click(function(e){

    var T = e.target;
    var P = $(T).parent();
    if(P != this){
    $('.menu').hide();
     $(P).filter('.odd').removeClass('odd');   
    }
    $(this).find('.menu').toggle();
    $(this).addClass('odd');

});