<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";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.