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"><tr>
                        <td colspan="3">  <table border="1" >
                                <tbody>
                                    <tr>
                                        <td>nestedTD1</td>
                                        <td>nestedTD2</td>
                                    </tr>
                                    <tr>
                                        <td>nestedTD3</td>
                                        <td>nestedTD4</td>
                                    </tr>
                                </tbody>
                            </table>      
                       </td>
                       </tr>
                       </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">
                        <tr>
                        <td colspan="3"><table border="1" >
                                <tbody>
                                    <tr>
                                        <td>nestedTD1</td>
                                    </tr>
                                    <tr>
                                        <td>nestedTD3</td>
                                   </tr>
                                 </tbody>
                              </table></td>
                              </tr>
                              </td>
                    </tr>

                </tbody>
            </table>

JavaScript

$(function () {

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