JSFiddle - React, Tailwind, and code Playground

by Adam Pavlov

HTML

<table>
    <tr>
        <td class="details-control"><a>L-O</a></td>
        <td>This is parent 1</td>
    </tr>
    <tr class = "hidden">
        <td></td>
        <td>This is 1st Child</td>
    </tr>
    <tr class = "hidden">
        <td></td>
        <td>This is 2nd Child</td>
    </tr>
    <tr>
        <td class="details-control"><a>L-O</a></td>
        <td>This is parent 2</td>
    </tr>
    <tr class = "hidden">
        <td></td>
        <td>This is 1st Child</td>
    </tr>
</table>

CSS

a {width:50px; display: block; background: yellow}
.child {
    color: blue;
    display: none;
}

.hidden {
    display: none;
}

.details-control {
    cursor:pointer;
}

JavaScript

$('.details-control').click(function() {
    var $td = $(this);
    
    if ($td.html() == '<a>L-O</a>') {
        $td.html('<a>L-C</a>');
        $td.parent().next(".hidden").show();
    } else {
        $td.html('<a>L-O</a>');
        $td.parent().next(".hidden").hide();
    }  
})