JSFiddle - React, Tailwind, and code Playground

HTML

<!-- opened -->
<details open>
    <summary>Summary</summary>
    <p>Additional information</p>
</details>

<!-- closed -->
<details>
    <summary>Summary</summary>
    <p>Additional information</p>
</details>

CSS

details summary ~ * {
    display: none;
}

details[open] summary ~ * {
    display: block;
}

/* not important */

details, summary, p {
    padding: 1em;    
}

summary {
    border: 1px solid black;   
    background-color: #aaa;
}

details, summary {
    display: block;
}

JavaScript

$("summary").click(function() {
    if ($(this).parent().attr("open")) {
        $(this).parent().removeAttr("open");
    } else {
        $(this).parent().attr("open", "open");
    }
});