JSFiddle - React, Tailwind, and code Playground

by 777q

HTML

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td><details><summary>Tom</summary><a href="https://www.html-seminar.de">Details</a></details></td>    <td><details><summary>Tom</summary><a href="https://www.html-seminar.de">Details</a></details></td>
        <td><details><summary>Tom</summary><a href="https://www.html-seminar.de">Details</a></details></td>
  </tr>
    <tr>
    <td><details><summary>Tom</summary>
    <a href="https://www.html-seminar.de">Details</a></details></td>
        <td><details><summary>Tom</summary>
        <a href="https://www.html-seminar.de">Details</a></details></td>
        <td><details><summary>Tom</summary>
        <a href="https://www.html-seminar.de">Details</a></details></td>
  </tr>
  <tr>
  </tr>
</table>

JavaScript

$("table details").on("click", function(event) {
  event.preventDefault();
  var val = $(this).prop("open");
  console.log(val)
  $(this).closest("tr").find("details").prop("open", !val);
});