Accordion

This uses the x-collapse plugin.

It's pretty easy to create a smooth transition yourself, but it adds extra complexity to your HTML markup which feels pointless when the x-collapse plugin does all the work for you and comes with extra functionality.

Here's a small example of creating the smooth transition yourself:

<div
  x-data="{ activeAccordion: false, maxHeight: 0 }"
  x-init="maxHeight = `${$refs.accordionContent.scrollHeight}px`"
  class="overflow-hidden"
>
  <h3>
    <button @click="activeAccordion = !activeAccordion">Toggle...</button>
  </h3>

  <div
    x-ref="accordionContent"
    :class="{ 'mt-4': activeAccordion }"
    :style="activeAccordion && { 'max-height': maxHeight }"
    class="transition-all max-h-0"
  >
    <p>Content...</p>
  </div>
</div>

Example

Code