JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td><details id=myDetails><summary>Jill</summary>Details</details></td>
    <td><details id=myDetails1><summary>Smith</summary>Details</details></td>
    <td><details id=myDetails2><summary>50</summary>Details</details></td>
  </tr>
    <tr>
    <td><details><summary>Tom</summary>Details</details></td>
    <td><details><summary>Peters</summary>Details</details></td>
    <td><details><summary>20</summary>Details</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);
});