JSFiddle - React, Tailwind, and code Playground

by code_rum

HTML

<table class="toptable" border="1">
        <tbody>
            <tr class="accordion">
                <td class="id1 n1">TD1</td>
                <td class="id1 n1">TD2</td>
                <td class="id1 n1">TD3</td>
                <td class="nested">
                    
                            <table border="1">
                                <tbody>
                                    <tr>
                                        <td>nestedTD1</td>
                                        <td>nestedTD2</td>
                                    </tr>
                                    <tr>
                                        <td>nestedTD3</td>
                                        <td>nestedTD4</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                   
            </tr>
            <tr class="accordion">
                <td class="id1 n1">TD1</td>
                <td class="id1 n1">TD2</td>
                <td class="id1 n1">TD3</td>
                <td class="nested">

                            <table border="1">
                                <tbody>
                                    <tr>
                                        <td>nestedTD1</td>
                                    </tr>
                                    <tr>
                                        <td>nestedTD3</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
            </tr>
        </tbody>
    </table>

JavaScript

$(function () {

        $(".toptable > tbody > tr > td:not(.n1)").hide();
        $(".toptable tr").find('td:first').click(function () {
      $(this).siblings(':last-child').show();
        });
    });