Accordion

<.accordion>
  <.accordion_item>
    <:header>
      What's the refund policy?
    </:header>
    <:panel>
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <.accordion_item>
    <:header>
      Can I upgrade my license later?
    </:header>
    <:panel>
      Yes, you can upgrade your license at any...
    </:panel>
  </.accordion_item>

  <.accordion_item>
    <:header>
      Do you offer technical support?
    </:header>
    <:panel>
      Yes, we offer technical support via email.
    </:panel>
  </.accordion_item>
</.accordion>

<.accordion multiple>
  <.accordion_item>
    <:header>
      What's the refund policy?
    </:header>
    <:panel>
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <.accordion_item>
    <:header>
      Can I upgrade my license later?
    </:header>
    <:panel>
      Yes, you can upgrade your license at any...
    </:panel>
  </.accordion_item>
</.accordion>

<.accordion>
  <.accordion_item expanded>
    <:header>
      What's the refund policy?
    </:header>
    <:panel>
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <.accordion_item>
    <:header>
      Can I upgrade my license later?
    </:header>
    <:panel>
      Yes, you can upgrade your license at any...
    </:panel>
  </.accordion_item>
</.accordion>

<.accordion>
  <.accordion_item icon={false}>
    <:header>
      What's the refund policy?
      <.icon
        name="hero-plus"
        class="size-5 text-zinc-400 transition-transform duration-[var(--animation-duration)] group-data-expanded/accordion-item:rotate-90 group-hover/accordion-item:text-gray-500 shrink-0"
      />
    </:header>
    <:panel>
      Our refund policy allows you to request a refund within 15 days of purchase if you are not satisfied with the product.
    </:panel>
  </.accordion_item>

  <.accordion_item icon={false}>
    <:header>
      Can I upgrade my license later?
      <.icon
        name="hero-plus"
        class="size-5 text-zinc-400 transition-transform duration-[var(--animation-duration)] group-data-expanded/accordion-item:rotate-90 group-hover/accordion-item:text-gray-500 shrink-0"
      />
    </:header>
    <:panel>
      Yes, you can upgrade your license at any time by paying the difference between your current license and the desired license.
    </:panel>
  </.accordion_item>
</.accordion>

<.accordion>
  <.accordion_item class="border border-zinc-200 dark:border-white/10 rounded-xl bg-white dark:bg-zinc-800">
    <:header class="px-5 py-3">
      What's the refund policy?
    </:header>
    <:panel class="px-5 pb-3">
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <!-- more items -->
</.accordion>

<.accordion animation_duration={600}>
  <.accordion_item>
    <:header>
      What's the refund policy?
    </:header>
    <:panel>
      Our refund policy allows you to request...
    </:panel>
  </.accordion_item>

  <!-- more items -->
</.accordion>