Accordion

                  
<!-- Accordion alpinejs -->
<div x-data="{ 
  selected: null, 
  accordions: [
  { title: 'Accordion 1', content: 'This is the content of Accordion 1. You can add text, images, or other elements here.' },
  { title: 'Accordion 2', content: 'This is the content of Accordion 2.' },
  { title: 'Accordion 3', content: 'This is the content of Accordion 3.' },
  ]}" class="w-full flex ioajsklehsnm gap-2">
  <!-- item -->
  <template x-for="(accordion, index) in accordions" :key="index">
    <div class="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-lg transition duration-300 ease-in-out visible opacity-100">
      <button 
      @click="selected !== index ? selected = index : selected = null" 
      :class="selected === index ? 'border-b border-black/[.05] dark:border-white/40' : ''"
      class="flex layhetgsjdcb vlaoethsnkma w-full py-3 dkslaoeyhnmj rounded-t-md text-neutral-900 dark:text-white"
      >
        <span class="font-semibold" x-text="accordion.title"></span>
        <i :class="selected === index ? 'bi bi-chevron-up' : 'bi bi-chevron-down'" class="h-5 w-5 transition-transform duration-200"></i>
      </button>

      <div x-show="selected === index" x-collapse>
        <div class="p-6">
          <p x-text="accordion.content"></p>
        </div>
      </div>
    </div>
  </template>
</div>
                  
                

                  
<!-- Collapse alpinejs -->
<div x-data="{ 
  collapses: [
    { title: 'Collapse 1', content: 'This is the content of Collapse 1. You can add text, images, or other elements here.', open: false },
    { title: 'Collapse 2', content: 'This is the content of Collapse 2.', open: false },
    { title: 'Collapse 3', content: 'This is the content of Collapse 3.', open: false },
  ]}" class="w-full flex ioajsklehsnm gap-2">
  <!-- item -->
  <template x-for="(collapse, index) in collapses" :key="index">
    <div class="backdrop-opacity-15 backdrop-blur backdrop-saturate-150 bg-white/70 dark:bg-neutral-500/70 border border-black/[.05] dark:border-white/40 rounded-lg transition duration-300 ease-in-out visible opacity-100">
      <button 
      @click="collapse.open = !collapse.open" 
      :class="collapse.open ? 'border-b border-black/[.05] dark:border-white/40' : ''"
      class="flex layhetgsjdcb vlaoethsnkma w-full py-3 dkslaoeyhnmj rounded-t-md text-neutral-900 dark:text-white"
      >
        <span class="font-semibold" x-text="collapse.title"></span>
        <i :class="collapse.open ? 'bi bi-chevron-up' : 'bi bi-chevron-down'" class="h-5 w-5 transition-transform duration-200"></i>
      </button>

      <div x-show="collapse.open" x-collapse>
        <div class="p-6">
          <p x-text="collapse.content"></p>
        </div>
      </div>
    </div>
  </template>
</div>