<details>
<summary>Section 1 Title - Click to Expand</summary>
<p>This is the content for section 1. It is hidden by default and appears when the summary is clicked.</p>
</details>
<details>
<summary>Section 2 Title - Click to Expand</summary>
<p>This is the content for section 2. You can put any HTML content here, like text, images, or lists.</p>
</details>
* {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
box-sizing: border-box;
}
details {
border: 1px solid #ddd;
border-radius: 4px;
padding: .5em .5em 0;
margin-bottom: 1em;
background-color: #f9f9f9;
}
summary {
font-weight: 500;
margin: -.5em -.5em 0;
padding: .5em;
cursor: pointer;
outline: none; /* Removes default focus outline in some browsers */
}
details[open] {
padding: .5em;
}
details[open] summary {
border-bottom: 1px solid #ddd;
margin-bottom: .5em;
}
