JSFiddle - React, Tailwind, and code Playground

by scaillerie

HTML

<table>
    <thead>
        <tr>
            <th></th><th>Id</th><th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <button class="detailsButton">Détail</button>
            </td>
            <td>1</td><td>First row</td>
        </tr>
        <tr class="detailsRow">
            <td>Hello</td>
        </tr>
        <tr>
            <td>
                <button class="detailsButton">Détail</button>
            </td>
            <td>2</td><td>2nd row</td>
        </tr>
        <tr class="detailsRow">
            <td>Hello</td>
        </tr>
    </tbody>
</table>

CSS

th, td {
  padding: 1px 5px;  
}

JavaScript

function details(fn) {
    return function() {
        var r = $(this).closest("tr").next("tr.detailsRow")[fn]();
        $("tr.detailsRow").not(r).hide();
    };
}


$(".detailsRow").hide();

$detailsButtons = $(".detailsButton").click(details('toggle'));
$detailsButtons.closest("tr").find("input").click(details('show'));