JSFiddle - React, Tailwind, and code Playground

by jasonkylefrank

HTML

<body>
<table>
    <tr id="row1"> <td> <div> Row 1</div> </td>  </tr>
    <tr id="row2"> <td> <div> Row 2</div>  </td></tr>
    <tr id="row3"> <td> <div> Row 3</div>  </td></tr>
</table>
<p id="showIt">Show row 2</p>
    <br/>
<p id="hideIt">Hide row 2</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

CSS

td { 
   border: 3px solid black; 
   padding: 5px;
}
p#showIt, p#hideIt {
   cursor: pointer; 
   padding: 4px;
   
}
p#showIt:hover, p#hideIt:hover {
    border: 1px solid gray;
}
#row2 > td {
    background: lightBlue;
}

JavaScript

$(function(){
    $('#row2 > td > div').hide();
    $('#row2 > td').hide();
    
    $('p#showIt').click(
        function() {
            var animationTime = 500;
            
            // Prepare the td for animating in (Cache orig values then set things 
            //   like padding top & bottom, border top & bottom to 0)
            var oldTdTopPadding = $('#row2 > td:first').css('paddingTop');            
            var oldTdBottomPadding = $('#row2 > td:first').css('paddingBottom');
            $('#row2 > td').css({'paddingTop': '0px', 'paddingBottom': '0px'});
            var oldTdTopBorder = $('#row2 > td').css('borderTop');
            var oldTdBottomBorder = $('#row2 > td').css('borderBottom');
            $('#row2 > td').css({'borderTop': '0px', 'borderBottom': '0px'});
            // Pre-animation requirement for td elements (make sure the 'contents' div is hidden during this)
            $('#row2 > td').show();
            // Animate in the height-related properties of the td elements
            $('#row2 > td').animate(
                {'paddingTop': oldTdTopPadding, 'paddingBottom': oldTdBottomPadding,
                 'borderTop': oldTdTopBorder, 'borderBottom': oldTdBottomBorder},
                animationTime);
            
            // Animate in the 'contents' of the tds (the nested div).
            $('#row2 > td > div').animate({ opacity: 'show', height: 'show' }, animationTime,
                function() {
                    // do whatever afterward
                });
             
        });
    $('p#hideIt').click(
        function() {
            $('#row2 > td > div').hide();   
            $('#row2 > td').hide();
        });
    
});