JSFiddle - React, Tailwind, and code Playground

HTML

<details>
    <summary>Bar Foo</summary>
    
    <p class="details-body">this is the body</p>
</details>

CSS

.details-body {
    display: none;
}

details[open] .details-body {
    display: block;
}

JavaScript

$('summary').on('click', function () {
  var details = $(this).parent();  
  $('details').prop('open', !details.attr('open'));
  //$('details').attr('open', !details.attr('open'));  
});