JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<decorator id="details-closed">
    <script>
        this.listen({
            selector: "#summary", type: "click",
            handler: function (event) {
                event.currentTarget.open = true;
            }
        });
    </script>
    <template>
        <a id="summary">
            &gt; <content select="summary:first-of-type"></content>
        </a>
    </template>
</decorator>

<decorator id="details-open">
    <script>
        this.listen({
            selector: "#summary", type: "click",
            handler: function (event) {
                event.currentTarget.open = false;
            }
        });
    </script>
    <template>
        <a id="summary">
            V <content select="summary:first-of-type"></content>
        </a>
        <content></content>
    </template>
</decorator>

CSS

details {
    decorator: url(#details-closed);
}
details[open] {
    decorator: url(#details-open);
}