JSFiddle - React, Tailwind, and code Playground

by calder12

HTML

<table>
    <tr><td><div class="details hide">Hithere</div></td><td><a href="#" class="show">Show</a></td></tr>
    <tr><td><div class="details hide">Hithere</div></td><td><a href="#" class="show">Show</a></td></tr>
    <tr><td><div class="details hide">Hithere</div></td><td><a href="#" class="show">Show</a></td></tr>
    <tr><td><div class="details hide">Hithere</div></td><td><a href="#" class="show">Show</a></td></tr>
    <tr><td><div class="details hide">Hithere</div></td><td><a href="#" class="show">Show</a></td></tr>
</table>

CSS

.hide{display:none;}
table td{border:1px solid black;width:55px}

JavaScript

$(".show").on("click",function(){
    var row = $(this).closest('tr');
    $(".details").each(function(){$(this).slideUp();});
    $(".details",row).slideToggle();
});