<div x-data="accordion()" class="p-8">
  
  
  <div>
    <div 
         @click="toggle('001f003f-aa5a-4c69-8f52-33c178a98338')"
         class="p-8 bg-gray-600 text-white">Accordion 1</div>
    <template x-if="active == '001f003f-aa5a-4c69-8f52-33c178a98338'">
      <div 
        x-transition:enter="transition-slow origin-top"
        x-transition:enter-start="opacity-0 scale-0"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition-slow origin-top"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-0"
        >
        <div class="p-8 bg-gray-200">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
      </div>
    </template>
  </div>
  
  
  <div>
    <div @click="toggle('bb8f39ce-ab21-444b-b9d8-309fa0acca2b')"
         class="p-8 bg-gray-600 text-white">Accordion 2</div>
    <template x-if="active == 'bb8f39ce-ab21-444b-b9d8-309fa0acca2b'">
      <div 
        x-transition:enter="transition-slow origin-top"
        x-transition:enter-start="opacity-0 scale-0"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition-slow origin-top"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-0"
        >
        <div class="p-8 bg-gray-200">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
      </div>
    </template>
  </div>
  
  
  <div>
    <div @click="toggle('0b4c8bbd-c8a5-4206-b1fa-6419203f7c6b')"
         class="p-8 bg-gray-600 text-white">Accordion 3</div>
    <template x-if="active == '0b4c8bbd-c8a5-4206-b1fa-6419203f7c6b'">
      <div 
        x-transition:enter="transition-slow origin-top"
        x-transition:enter-start="opacity-0 scale-0"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition-slow origin-top"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-0"
        >
        <div class="p-8 bg-gray-200">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
      </div>
    </template>
  </div>
  
  
  <div>
    <div @click="toggle('5f4200f7-2a3f-4f45-a33e-6734d17d3a37')"
         class="p-8 bg-gray-600 text-white">Accordion 4</div>
    <template x-if="active == '5f4200f7-2a3f-4f45-a33e-6734d17d3a37'">
      <div 
        x-transition:enter="transition-slow origin-top"
        x-transition:enter-start="opacity-0 scale-0"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition-slow origin-top"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-0"
        >
        <div class="p-8 bg-gray-200">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </div>
      </div>
    </template>
  </div>
  
  
</div>
.transition-slow { transition-duration: .2s }
.scale-0 { transform:scaleY(0)}
.scale-100 { transform:scaleY(1)}
.origin-top { transform-origin:top; }
function accordion() {
  return {
    active: '',
    toggle(id) { this.active = this.active == id ? '' : id }
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.1.4/tailwind.min.css

External JavaScript

  1. https://cdn.jsdelivr.net/gh/alpinejs/alpine@v1.9.2/dist/alpine.js