JSFiddle - React, Tailwind, and code Playground

by Egidius

HTML

<table id="table">
            <tr id="1"><td>this</td><td>is</td><td>row</td><td>one</td></tr>
            <tr id="2"><td>this</td><td>might</td><td>be</td><td>row</td><td>two</td></tr>
            <tr id="3"><td>this</td><td>should</td><td>be</td><td>row</td><td>three</td></tr>
        </table>
        
        <div id="info">
        
        </div>

CSS

#table table, th, td {
            border: 1px solid black;
        }
        
        #table td {
            padding: 50px 25px;
        }
        
        #info {
            width: 50px;
            height: 100px;
            background-color:red;
            display:none;
            position:absolute;
        }

JavaScript

var currentexpand = "";
    var lastexpand = "";
    
    function collapse(callback) {
        
        if (lastexpand != "") {
            // remove currenexpanded class    
            $(lastexpand).removeClass("rowexpanded");
        }
        if (currentexpand != "") {
            // remove currenexpanded class
            $(currentexpand).removeClass("rowexpanded");
                
            
            var row_id = $(currentexpand).attr("id");
            if (row_id != undefined) { 
                $("#info").slideUp(1000, function() {
                    if (callback && typeof(callback) === "function") {
                        callback();
                    }
                }
                    ); 
                $(this).text("laden...");
            }
        }
        
        
        
        
    }
    
    function expand(target) {
    
        // fill div
        $("#info").text($(target).attr('id'));

        // get row offset
        var rowposition = target.offset();
        var rowtop = rowposition.top;
        var rowleft = rowposition.left;
        var rowheight = target.height();

        // place div exactly beneath the row
        $("#info").css('top', rowtop + rowheight - 1);
        $("#info").slideDown(1000); 
                                        
        // row class toggle
        target.toggleClass("rowexpanded");
    
    }
    
    
    // table row click
    $(document).on('click', '#table tbody tr', function() {
                
        // define the row that has been clicked
        lastexpand = currentexpand;
        currentexpand = $(this);
        
        // when the row that has been clicked is already expanded it should now be collapsed and the algorithm should break
        if($(this).hasClass('rowexpanded')) {
            collapse();
            return false;
        }
        
        // when another row has already been expanded it should collapse first before the clicked row expands
       ...