JSFiddle - React, Tailwind, and code Playground

by marcosfromero

HTML

<div id="content">
    <!-- opened -->
    <details open>
        <summary>Summary</summary>
        <p>Additional information</p>
    </details>
    
    <!-- closed -->
    <details>
        <summary>Summary</summary>
        <p>Additional information</p>
    </details>
</div>
<textarea id="log"></textarea>

CSS

details p {
    display: block;
}

details[open!=open] p {
    display: none;
}


/* not important */

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

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

textarea {
 width: 100%;
  height: 300px;  
}

JavaScript

$("summary").click(function() {
    if ($(this).parent().attr("open")) {
        $(this).parent().removeAttr("open");
    } else {
        $(this).parent().attr("open", "open");
    }
    
    $('textarea').val($('#content').html());
});
$('textarea').val($('#content').html());