<div
  x-data="{
      activeAccordions: ['accordion-1'],
      setActiveAccordion(id) {                                
          if (this.activeAccordions.includes(id)) {                    
          this.activeAccordions = this.activeAccordions.filter(item => item !== id);
          } else {                        
              this.activeAccordions.push(id);
          }
          }
      }"
  class="relative w-full mx-auto overflow-hidden text-sm font-normal flex flex-col gap-4 lg:gap-6"
>
  <div x-data="{ id: $id('accordion') }" class="cursor-pointer group bg-neutral-0 dark:bg-neutral-904 rounded-xl">
    <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-3 sm:p-4 md:p-5 xl:px-8 text-left select-none">
      <span class="l-text font-medium">Accordion 01</span>
      <span :class="activeAccordions.includes(id)?'bg-error-300 rotate-180':'bg-primary-300'" class="shrink-0 size-6 lg:size-9 rounded-full f-center text-xl text-neutral-0 font-medium duration-300">
        <i x-show="!activeAccordions.includes(id)" class="las la-plus"></i>
        <i x-show="activeAccordions.includes(id)" class="las la-minus"></i>
      </span>
    </button>
    <div x-show="activeAccordions.includes(id)" x-collapse x-cloak>
      <div class="px-4 md:px-5 xl:px-8">
        <p class="border-t border-dashed border-neutral-40 dark:border-neutral-500 py-4">
          It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
          it look like readable English.
        </p>
      </div>
    </div>
  </div>
  <div x-data="{ id: $id('accordion') }" class="cursor-pointer group bg-neutral-0 dark:bg-neutral-904 rounded-xl">
    <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-3 sm:p-4 md:p-5 xl:px-8 text-left select-none">
      <span class="l-text font-medium">Accordion 02</span>
      <span :class="activeAccordions.includes(id)?'bg-error-300 rotate-180':'bg-primary-300'" class="shrink-0 size-6 lg:size-9 rounded-full f-center text-xl text-neutral-0 font-medium duration-300">
        <i x-show="!activeAccordions.includes(id)" class="las la-plus"></i>
        <i x-show="activeAccordions.includes(id)" class="las la-minus"></i>
      </span>
    </button>
    <div x-show="activeAccordions.includes(id)" x-collapse x-cloak>
      <div class="px-4 md:px-5 xl:px-8">
        <p class="border-t border-dashed border-neutral-40 dark:border-neutral-500 py-4">
          It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
          it look like readable English.
        </p>
      </div>
    </div>
  </div>
  <div x-data="{ id: $id('accordion') }" class="cursor-pointer group bg-neutral-0 dark:bg-neutral-904 rounded-xl">
    <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-3 sm:p-4 md:p-5 xl:px-8 text-left select-none">
      <span class="l-text font-medium">Accordion 03</span>
      <span :class="activeAccordions.includes(id)?'bg-error-300 rotate-180':'bg-primary-300'" class="shrink-0 size-6 lg:size-9 rounded-full f-center text-xl text-neutral-0 font-medium duration-300">
        <i x-show="!activeAccordions.includes(id)" class="las la-plus"></i>
        <i x-show="activeAccordions.includes(id)" class="las la-minus"></i>
      </span>
    </button>
    <div x-show="activeAccordions.includes(id)" x-collapse x-cloak>
      <div class="px-4 md:px-5 xl:px-8">
        <p class="border-t border-dashed border-neutral-40 dark:border-neutral-500 py-4">
          It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
          it look like readable English.
        </p>
      </div>
    </div>
  </div>
  <div x-data="{ id: $id('accordion') }" class="cursor-pointer group bg-neutral-0 dark:bg-neutral-904 rounded-xl">
    <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-3 sm:p-4 md:p-5 xl:px-8 text-left select-none">
      <span class="l-text font-medium">Accordion 04</span>
      <span :class="activeAccordions.includes(id)?'bg-error-300 rotate-180':'bg-primary-300'" class="shrink-0 size-6 lg:size-9 rounded-full f-center text-xl text-neutral-0 font-medium duration-300">
        <i x-show="!activeAccordions.includes(id)" class="las la-plus"></i>
        <i x-show="activeAccordions.includes(id)" class="las la-minus"></i>
      </span>
    </button>
    <div x-show="activeAccordions.includes(id)" x-collapse x-cloak>
      <div class="px-4 md:px-5 xl:px-8">
        <p class="border-t border-dashed border-neutral-40 dark:border-neutral-500 py-4">
          It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
          it look like readable English.
        </p>
      </div>
    </div>
  </div>
  <div x-data="{ id: $id('accordion') }" class="cursor-pointer group bg-neutral-0 dark:bg-neutral-904 rounded-xl">
    <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-3 sm:p-4 md:p-5 xl:px-8 text-left select-none">
      <span class="l-text font-medium">Accordion 05</span>
      <span :class="activeAccordions.includes(id)?'bg-error-300 rotate-180':'bg-primary-300'" class="shrink-0 size-6 lg:size-9 rounded-full f-center text-xl text-neutral-0 font-medium duration-300">
        <i x-show="!activeAccordions.includes(id)" class="las la-plus"></i>
        <i x-show="activeAccordions.includes(id)" class="las la-minus"></i>
      </span>
    </button>
    <div x-show="activeAccordions.includes(id)" x-collapse x-cloak>
      <div class="px-4 md:px-5 xl:px-8">
        <p class="border-t border-dashed border-neutral-40 dark:border-neutral-500 py-4">
          It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
          it look like readable English.
        </p>
      </div>
    </div>
  </div>
</div>
                  

<div
x-data="{
            activeAccordion: 'accordion-6',
            setActiveAccordion(id) {                              
                this.activeAccordion = (this.activeAccordion == id) ? '' : id 
                }
            }"
class="relative w-full mx-auto overflow-hidden text-sm font-normal flex flex-col gap-4 lg:gap-6"
>
<div x-data="{ id: $id('accordion') }" class="cursor-pointer group bg-neutral-0 dark:bg-neutral-904 rounded-xl">
  <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-3 sm:p-4 md:p-5 xl:px-8 text-left select-none">
    <div class="flex justify-between grow items-center gap-3">
      <p class="l-text font-semibold">How can I contact customer support?</p>
      <span :class="activeAccordion==id?'bg-error-300 rotate-180':'bg-primary-300'" class="shrink-0 size-6 lg:size-9 rounded-full f-center xl-text text-neutral-0 font-medium duration-300">
        <i x-show="activeAccordion!=id" class="las la-plus"></i>
        <i x-show="activeAccordion==id" class="las la-minus"></i>
      </span>
    </div>
  </button>
  <div x-show="activeAccordion==id" x-collapse x-cloak>
    <div class="px-4 md:px-5 xl:px-8">
      <p class="border-t border-dashed border-neutral-40 dark:border-neutral-500 py-4">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
        it look like readable English.
      </p>
    </div>
  </div>
</div>
<div x-data="{ id: $id('accordion') }" class="cursor-pointer group bg-neutral-0 dark:bg-neutral-904 rounded-xl">
  <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-3 sm:p-4 md:p-5 xl:px-8 text-left select-none">
    <div class="flex justify-between grow items-center gap-3">
      <p class="l-text font-semibold">Is there a refund policy?</p>
      <span :class="activeAccordion==id?'bg-error-300 rotate-180':'bg-primary-300'" class="shrink-0 size-6 lg:size-9 rounded-full f-center xl-text text-neutral-0 font-medium duration-300">
        <i x-show="activeAccordion!=id" class="las la-plus"></i>
        <i x-show="activeAccordion==id" class="las la-minus"></i>
      </span>
    </div>
  </button>
  <div x-show="activeAccordion==id" x-collapse x-cloak>
    <div class="px-4 md:px-5 xl:px-8">
      <p class="border-t border-dashed border-neutral-40 dark:border-neutral-500 py-4">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
        it look like readable English.
      </p>
    </div>
  </div>
</div>
<div x-data="{ id: $id('accordion') }" class="cursor-pointer group bg-neutral-0 dark:bg-neutral-904 rounded-xl">
  <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-3 sm:p-4 md:p-5 xl:px-8 text-left select-none">
    <div class="flex justify-between grow items-center gap-3">
      <p class="l-text font-semibold">How does your pricing structure work?</p>
      <span :class="activeAccordion==id?'bg-error-300 rotate-180':'bg-primary-300'" class="shrink-0 size-6 lg:size-9 rounded-full f-center xl-text text-neutral-0 font-medium duration-300">
        <i x-show="activeAccordion!=id" class="las la-plus"></i>
        <i x-show="activeAccordion==id" class="las la-minus"></i>
      </span>
    </div>
  </button>
  <div x-show="activeAccordion==id" x-collapse x-cloak>
    <div class="px-4 md:px-5 xl:px-8">
      <p class="border-t border-dashed border-neutral-40 dark:border-neutral-500 py-4">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
        it look like readable English.
      </p>
    </div>
  </div>
</div>
<div x-data="{ id: $id('accordion') }" class="cursor-pointer group bg-neutral-0 dark:bg-neutral-904 rounded-xl">
  <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-3 sm:p-4 md:p-5 xl:px-8 text-left select-none">
    <div class="flex justify-between grow items-center gap-3">
      <p class="l-text font-semibold">How do I create an account?</p>
      <span :class="activeAccordion==id?'bg-error-300 rotate-180':'bg-primary-300'" class="shrink-0 size-6 lg:size-9 rounded-full f-center xl-text text-neutral-0 font-medium duration-300">
        <i x-show="activeAccordion!=id" class="las la-plus"></i>
        <i x-show="activeAccordion==id" class="las la-minus"></i>
      </span>
    </div>
  </button>
  <div x-show="activeAccordion ==id" x-collapse x-cloak>
    <div class="px-4 md:px-5 xl:px-8">
      <p class="border-t border-dashed border-neutral-40 dark:border-neutral-500 py-4">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
        it look like readable English.
      </p>
    </div>
  </div>
</div>
<div x-data="{ id: $id('accordion') }" class="cursor-pointer group bg-neutral-0 dark:bg-neutral-904 rounded-xl">
  <button @click="setActiveAccordion(id)" class="flex items-center justify-between w-full p-3 sm:p-4 md:p-5 xl:px-8 text-left select-none">
    <div class="flex justify-between grow items-center gap-3">
      <p class="l-text font-semibold">How do I track my order?</p>
      <span :class="activeAccordion==id?'bg-error-300 rotate-180':'bg-primary-300'" class="shrink-0 size-6 lg:size-9 rounded-full f-center xl-text text-neutral-0 font-medium duration-300">
        <i x-show="activeAccordion!=id" class="las la-plus"></i>
        <i x-show="activeAccordion==id" class="las la-minus"></i>
      </span>
    </div>
  </button>
  <div x-show="activeAccordion==id" x-collapse x-cloak>
    <div class="px-4 md:px-5 xl:px-8">
      <p class="border-t border-dashed border-neutral-40 dark:border-neutral-500 py-4">
        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making
        it look like readable English.
      </p>
    </div>
  </div>
</div>
</div>