Accordion In List

Since the accordion is used as a list item, we set heading-level=“none” to preserve a correct heading hierarchy.

Frequently Asked Questions

What is your return policy?
We offer a 30-day return policy. Products must be in original condition and packaging.
Do you offer international shipping?
Yes, we ship to most countries. Shipping fees and times vary by destination.
How can I track my order?
Once your order is shipped, you will receive a tracking number by email.
Can I customize my order?
This option is currently unavailable. Custom orders will be available soon.

Code

The following example assumes that you have imported the component and set up the theme.

<h2>Frequently Asked Questions</h2>

<br />

<ul class="example-list">
  <li>
    <wcp-accordion heading-level="none" marker="start">
      <span slot="summary">What is your return policy?</span>
      <p>We offer a 30-day return policy. Products must be in original condition and packaging.</p>
    </wcp-accordion>
  </li>

  <li>
    <wcp-accordion heading-level="none" marker="start">
      <span slot="summary">Do you offer international shipping?</span>
      <p>Yes, we ship to most countries. Shipping fees and times vary by destination.</p>
    </wcp-accordion>
  </li>

  <li>
    <wcp-accordion heading-level="none" marker="start">
      <span slot="summary">How can I track my order?</span>
      <p>Once your order is shipped, you will receive a tracking number by email.</p>
    </wcp-accordion>
  </li>

  <li>
    <wcp-accordion heading-level="none" marker="start">
      <span slot="summary">Can I customize my order?</span>
      <p>This option is currently unavailable. Custom orders will be available soon.</p>
    </wcp-accordion>
  </li>
</ul>

<style>
  .example-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 0;
    margin: 0;
    list-style: none;

    wcp-accordion::part(content) {
      background-color: var(--wcp-base-3);
    }
  }
</style>