JSFiddle - React, Tailwind, and code Playground

by tobisagt

HTML

<input id="btn_expand" type="button" value="expand"/>
<input id="btn_reduce" type="button" value="reduce"/>
<table id="myTable">
    <tr>
        <th>Row Number</th>
        <th>Header 1</th>
        <th>header 2</th>
    </tr>
    <tr>
        <td>Row 1</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>Content</td>
        <td>Content</td>        
    </tr>
    <tr>
        <td>Row 3</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Row 4</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Row 5</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Row 6</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Row 7</td>
        <td>Content</td>
        <td>Content</td>     
    </tr>
    <tr>
        <td>Row 8</td>
        <td>Content</td>
        <td>Content</td>      
    </tr>
    <tr>
        <td>Row 9</td>
        <td>Content</td>
        <td>Content</td>
    </tr>
</table>

CSS

#myTable tr { background: #666;height: 30px; border: 1px solid black; }
#myTable tr:hover { background: #ddd; }
#myTable tr td { width: 100px; }
#myTable tr th { background: #999; }
#btn_reduce {display: none;}

JavaScript

$(function () {
    var tr = $('#myTable tr');    
    tr.each(function (i, v) {
        if(i>1)
            $(v).hide();
    });
       
    $('#btn_expand').click(function (){ $('#btn_expand').css('display','none'); })
    $('#btn_expand').click(function (){ $('#btn_reduce').css('display','block'); })
    
    
    $('#btn_reduce').click(function (){ $('#btn_expand').css('display','block'); })
    $('#btn_reduce').click(function (){ $('#btn_reduce').css('display','none'); }) 
    
    $('#btn_expand').click(function (){ show(1, 100); })    
    
        
        
    $('#btn_reduce').click(function (){ hide(tr.length-1, 100); })   
    
    function show(i, speed) {
        tr.eq(i).stop(true, true).show(speed, function () { if(i<tr.length-1) show(++i, speed); })
    }
            
    function hide(i, speed) {
        tr.eq(i).stop(true, true).hide(speed, function () { if(i>2) hide(--i, speed); })
    }  
        
})