<ul>
<li>
<details name="faq">
<summary>Section 1</summary>
<p>This is the content of section 1.</p>
</details>
</li>
<li>
<details name="faq">
<summary>Section 2</summary>
<p>This is the content of section 2.</p>
</details>
</li>
<li>
<details class="custom-details" name="faq">
<summary>Section 3 with a custom arrow</summary>
<p>This is the content of section 3.</p>
</details>
</li>
</ul>
ul {
list-style: none;
margin: 0;
max-width: 20rem;
padding: 0;
}
ul li:not(:last-of-type) {
margin-bottom: 1rem;
}
details {
background: #f8f8f8;
border: 1px solid #f0f0f0;
border-radius: 0.3rem;
padding: 0.5rem;
}
details p:last-of-type {
margin-bottom: 0;
}
details summary {
padding: 0.25rem 0.5rem;
}
.custom-details summary::-webkit-details-marker,
.custom-details summary::marker {
content: "";
font-size: 0;
}
.custom-details summary::after {
content: "\23F5";
margin-left: 0.5rem;
}
.custom-details[open] > summary::after {
content: "\23F7";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.