<details open>
<summary>Container</summary>
<div>
The Content Goes Here
</div>
</details>
<details>
<summary>Container</summary>
<p>
The Content Goes Here
</p>
</details>
<details>
<summary>Container</summary>
<p>
The Content Goes Here
</p>
</details>
body {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
details {
width: 100%;
margin-bottom: 8px;
}
test {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
summary {
background-color: gray;
padding: 16px;
color: white;
font-weight: bold;
}
details[open] {
background-color: whitesmoke;
}
details[open] p {
padding: 16px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.