# Things That Open and Close

• Simple Toggle
• Transition and Styles
  • Multiple Items (single open)

# Simple Toggle

<div x-data="{ open: false }">
    <!-- Toggle -->
    <button class="btn blue" x-on:click="open = ! open">
        <span x-text="open ? 'Close' : 'Open'"></span>
    </button>

    <div x-show="open">
       <!-- Content -->
    </div>
</div>

Optionally, you can add x-on:mouseenter and x-on:mouseleave attributes in the parent element to switch the open state when hovering.

<div x-data="{ open: false }" x-on:mouseenter="open=true" x-on:mouseleave="open=false">
    <button class="btn mb-05 w-10" x-on:click="open = ! open">
        <span x-text="open ? 'Move Away' : 'Hover to Open'"></span>
    </button>
    <div x-show="open">
        Hey there!
    </div>
</div>

# Transition and Styles

Add x-collapse to the x-show directive to animate the opening and closing of the accordion.

# Multiple Items (single open)

<div x-data="{ active: 0, }" class="space-y">
    <div x-data="{
        id: 1,
        get expanded() { return this.active === this.id },
        set expanded(value) { this.active = value ? this.id : null }
    }">
        <button x-on:click="expanded =! expanded"
            :aria-expanded="expanded" class="btn primary">
            <span x-show="!expanded">Open Item One</span>
            <span x-show="expanded">Close Item One</span>
        </button>
        <div x-show="expanded">
            Hey there!
        </div>
    </div>
    <div x-data="{
        id: 2,
        get expanded() { return this.active === this.id },
        set expanded(value) { this.active = value ? this.id : null }
    }">
        <button x-on:click="expanded =! expanded"
            :aria-expanded="expanded" class="btn primary">
            <span x-show="!expanded">Open Item Two</span>
            <span x-show="expanded">Close Item Two</span>
        </button>
        <div x-show="expanded">
            Hey there!
        </div>
    </div>
</div>