JSFiddle - React, Tailwind, and code Playground

by tobisagt

HTML

<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>
<input class="btn_expand" type="button" value="expand"/>
<input class="btn_reduce" type="button" value="reduce"/>

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; }

JavaScript

$(function () {
    var tr = $('#myTable tr');    
    tr.each(function (i, v) {
        if(i>2)
            $(v).hide();
    });
    $('.btn_expand').click(function (){ $(this).css(display: "block"); }) 
    $('.btn_expand').click(function (){ $(this).css(display: "none"); })    
    $('.btn_expand').click(function (){ show(1, 10); })    
    $('.btn_reduce').click(function (){ hide(tr.length-1, 10); })   
    
    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>3) hide(--i, speed); })
    }  
        
})