x-show - Toggle Visibility in Alpine.js

From the Alpine.js cheat sheet · Directives - Data Display · verified Jul 2026

x-show - Toggle Visibility

Show or hide elements based on conditions

html

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>

  <div x-show="open">
    This content toggles visibility
  </div>
</div>

✅ Uses CSS display property (element stays in DOM)

💡 Better for frequently toggled content than x-if

🔍 Combine with x-transition for smooth animations

⚡ Element is hidden but still rendered in HTML

x-showvisibilitytoggleconditional

More Alpine.js tasks

x-text - Display Text
x-html - Render HTML

Back to the full Alpine.js cheat sheet