JSFiddle - React, Tailwind, and code Playground

by Town

HTML

<h1>Left to right</h1>
<table>
    <tr>
        <td class="ltr">Porsche</td>
        <td>911</td>
        <td>944</td>
    </tr>
    <tr>        
    </tr>
    <tr>
        <td class="ltr">Ferrari</td>
        <td>360</td>
        <td>599</td>
    </tr>
</table>
<h1>Top to bottom</h1>

<table>
    <tr class="ttb">
        <td>Porsche</td>
    </tr>
    <tr>
        <td>911</td>
    </tr>
    <tr>
        <td>944</td>
    </tr>
    <tr>        
    </tr>
    <tr class="ttb">
        <td>Ferrari</td>
    </tr>
    <tr>
        <td>360</td>
    </tr>
    <tr>
        <td>599</td>
    </tr>
</table>

CSS

.ltr, .ttb {cursor: pointer;}
table {width: 50%;}
h1 {font-size: 1.2em; font-weight: bold; margin: 10px 0 10px 0;}

JavaScript

$(function() {
    $('.ltr').click(function() {
        $(this).siblings().toggle();
    })
        // call .click once the handler is added
        // if you don't want this, simply remove it to hook up 
        // the event and leave everything open by default
        //.click(); // open by default

    $('.ttb').click(function() {
        $(this).nextUntil('.ttb').toggle();
    })
        // call .click once the handler is added
        // if you don't want this, simply remove it to hook up 
        // the event and leave everything open by default
        .click(); // closed by default
    
    
    // no need for this
    // $('.ttb').click();
});