# Things That Open and Close

• Simple Toggle
• Transition and Styles

# 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.