使用 HTML details 元素创建独占手风琴

<details>
  <p>
    The response phrase for 413 "Content Too Large" used to be "Payload Too
    Large", and this message is still widely used.
  </p>
</details>

<details>
  <summary>System configuration</summary>
  <ul>
    <li>200GB RAM</li>
    <li>4PB storage</li>
  </ul>
</details>

details {
  font-family: sans-serif;
  width: 50%;
}

summary {
  color: white;
  background-color: cornflowerblue;
  padding: 1rem;
  cursor: pointer;
}

summary:hover {
  background-color: darkslateblue;
}

p,
ul {
  padding: 15px;
  margin: 0 1rem;
  background-color: white;
}

<details>
  <summary>System configuration</summary>
  <ul>
    <li>200GB RAM</li>
    <li>4PB storage</li>
  </ul>
</details>

<details>
  <summary>Recommended settings</summary>
  <ul>
    <li>Extreme mode: on</li>
    <li>Raytracing: enabled</li>
  </ul>
</details>

<details>
  <summary>Other details</summary>
  <ul>
    <li>Material: Faux Leather, Metal</li>
    <li>Item Weight: 10.2Kg</li>
  </ul>
</details>

details {
  font-family: sans-serif;
  width: 50%;
}

summary {
  color: white;
  background-color: cornflowerblue;
  padding: 1rem;
  cursor: pointer;
}

summary:hover {
  background-color: darkslateblue;
}

p,
ul {
  padding: 15px;
  margin: 0 1rem;
  background-color: white;
}

<details name="tech-specs">
  <summary>System configuration</summary>
  <ul>
    <li>200GB RAM</li>
    <li>4PB storage</li>
  </ul>
</details>

<details name="tech-specs">
  <summary>Recommended settings</summary>
  <ul>
    <li>Extreme mode: on</li>
    <li>Raytracing: enabled</li>
  </ul>
</details>

<details name="tech-specs">
  <summary>Other details</summary>
  <ul>
    <li>Material: Faux Leather, Metal</li>
    <li>Item Weight: 10.2Kg</li>
  </ul>
</details>

details {
  font-family: sans-serif;
  width: 50%;
  border: 1px solid lightgrey;
  border-radius: 5px;
  margin: 0.5rem;
}

details:hover {
  box-shadow: 2px 2px 2px 1px #e6e6e6;
}

summary {
  margin: 0.5rem;
  padding: 0.5rem;
  cursor: pointer;
}

p {
  padding: 1rem;
  margin: 0;
  background-color: #e6e6e6;
}

<details name="faq">
  <summary>Can I request a refund?</summary>
  <p>
    Yes, you have up to 30 days to request a refund. See our T&C for details.
  </p>
</details>

<!-- etc. -->

<details name="faq">
  <summary>What data do you store?</summary>
  <p>
    We use some anonymized visitor stats for the purpose of improving the
    service reliability. See our Privacy Policy for more information.
  </p>
</details>

<details name="faq">
  <summary>Are all products organic?</summary>
  <p>
    We do our best to ensure all ingredients are organic, but some exceptions
    are listed on each product page under "ingredients".
  </p>
</details>