Collapse Animations

🎭 Alpine.js Collapse Animations: The Magic Accordion

Imagine a treasure chest. When you tap it, it smoothly opens to reveal gold coins inside. Tap again, it gently closes. That’s exactly what Collapse does for your website!

🌟 What is Alpine.js Collapse?

Think of Collapse like a magic drawer in your toy box.

When you want to see your toys, you pull the drawer open—it slides out smoothly. When you’re done, you push it back—it slides in gently. No sudden jumps. Just smooth, beautiful movement!

Without Collapse: Your content appears and disappears instantly—POOF! Like a light switch.

With Collapse: Your content slides open and closed gracefully—like a flower blooming and closing.

📦 Getting Started: Adding the Collapse Plugin

Before our magic drawer can work, we need to give Alpine.js the “Collapse power”!

Step 1: Add the Script

<script defer
  src="https://cdn.jsdelivr.net/npm/
  @alpinejs/collapse@3.x.x/dist/
  cdn.min.js">
</script>

<script defer
  src="https://cdn.jsdelivr.net/npm/
  alpinejs@3.x.x/dist/cdn.min.js">
</script>

Important: The Collapse script goes BEFORE the main Alpine script. Think of it like putting on socks before shoes!

🎪 Collapse Animation Basics

The Magic Spell: x-collapse

Here’s our first magic trick! We use x-collapse to make things slide open and closed.

<div x-data="{ open: false }">

  <button @click="open = !open">
    🎁 Open Gift Box
  </button>

  <div x-show="open" x-collapse>
    <p>🎉 Surprise! Happy Birthday!</p>
  </div>

</div>

🔍 Let’s Break This Down

Think of this like a storybook with flaps:

🎬 What Happens Behind the Scenes

graph TD
    A["Button Clicked"] --> B{Is open true?}
    B -->|No| C["Set open = true"]
    B -->|Yes| D["Set open = false"]
    C --> E["Content slides DOWN"]
    D --> F["Content slides UP"]
    E --> G["✨ Fully visible"]
    F --> H["🙈 Fully hidden"]

The magic: x-collapse automatically measures your content’s height and animates it from 0 to full height (or back). You don’t need to do any math!

⚙️ Collapse Configuration

Now let’s learn the secret settings that make our magic drawer even better!

🐢 Making It Slower: x-collapse.duration

Sometimes we want our animation to be extra slow and dramatic—like a grand reveal!

<div x-show="open"
     x-collapse.duration.500ms>
  <p>I appear slowly over
     half a second!</p>
</div>

Translation: The .duration.500ms means “take 500 milliseconds (half a second) to open or close.”

Speed Options

🎭 Example: FAQ Accordion

Here’s a real-world example—a Frequently Asked Questions section:

<div x-data="{ activeQ: null }">

  <!-- Question 1 -->
  <div>
    <button
      @click="activeQ =
        activeQ === 1 ? null : 1">
      ❓ What is Alpine.js?
    </button>

    <div x-show="activeQ === 1"
         x-collapse.duration.300ms>
      <p>Alpine.js is a tiny
         JavaScript framework!</p>
    </div>
  </div>

  <!-- Question 2 -->
  <div>
    <button
      @click="activeQ =
        activeQ === 2 ? null : 2">
      ❓ Why use Collapse?
    </button>

    <div x-show="activeQ === 2"
         x-collapse.duration.300ms>
      <p>It makes opening/closing
         content smooth and pretty!</p>
    </div>
  </div>

</div>

🧠 How the Accordion Works

graph TD
    A["Click Question 1"] --> B{Is Q1 already open?}
    B -->|Yes| C["Close Q1 - set null"]
    B -->|No| D["Open Q1 - set 1"]
    D --> E["Q1 slides open"]
    D --> F["Any other open Q closes"]

The trick: We use activeQ to remember which question is open. Only ONE can be open at a time!

🎨 The Complete Picture

Here’s everything working together:

<!-- 1. Add the plugins -->
<script defer src="@alpinejs/collapse">
</script>
<script defer src="alpinejs"></script>

<!-- 2. Create your component -->
<div x-data="{ showInfo: false }">

  <button @click="showInfo = !showInfo">
    {{ showInfo ? '🔼 Hide' : '🔽 Show' }}
    Details
  </button>

  <div x-show="showInfo"
       x-collapse.duration.400ms>

    <div style="padding: 16px;
                background: #f0f0f0;">
      <h3>🎉 Hidden Content!</h3>
      <p>This slides in and out
         smoothly thanks to
         x-collapse!</p>
    </div>

  </div>

</div>

🏆 Key Takeaways

💡 Pro Tips

1. Always pair x-collapse with x-show — they’re best friends!

2. Start with default duration — only customize if needed.

3. The content height is automatic — no need to set fixed heights.

4. Works with any content — text, images, forms, anything!

🎊 You Did It!

You now know how to create beautiful, smooth collapse animations in Alpine.js!

Remember the treasure chest? Now YOU can make content on your website open and close just as magically. Go build something amazing! 🚀