JSFiddle - React, Tailwind, and code Playground

by mblase75

HTML

<button id="hideshow">Hide/Show</button>

<div class="divTable" id='tableuno'>
        <div class="headRow">
                <div class="divCell" align="center">VIP Name</div>
                <div  class="divCell">IP</div>
                <div  class="divCell">Ports</div>
                <div  class="divCell">Method</div>
                <div  class="divCell">Mode</div>
                <div  class="divCell">Protocol</div>
                <div  class="divCell">Graph</div>
        </div>
        <div class="divRow">
                        <div class="divCell">Rip Label</div>
                        <div class="divCell">IP</div>
                        <div class="divCell">ports</div>
                        <div class="divCell">Weight</div>
                        <div class="divCell">onlineoffline</div>
                        <div class="divCell">updownarrow</div>
                        <div class="divCell">graph</div> 
                </div>
                <div class="divRow">
                        <div class="divCell">xxx</div>
                        <div class="divCell">yyy</div>
                        <div class="divCell">www</div>
                </div>
                <div class="divRow">
                        <div class="divCell">ttt</div>
                        <div class="divCell">uuu</div>
                        <div class="divCell">Mkkk</div>
                </div>
      </div>

CSS

.divTable{
    display:table;      
    background-color:#eee;             
    border-spacing:5px;
}
.divRow{
    display:table-row;
    width:auto;
    background-color:#fff;
}
.headRow {
    display:table-row;
}
.divCell{
    display:table-column;
    float:left;
    width:200px;          
}

JavaScript

$("#hideshow").click(function() {
    var $divRow = $(".divRow");
    if ($divRow.is(":hidden")) {
        $divRow.show('fast');
    }
    else {
        $divRow.hide();
    }
});