x-show Directive

Toggle visibility without removing the element from the DOM. Super fast for frequent toggles.

What is x-show?

x-show toggles the visibility of an element by setting display: none; inline. It does not remove the element from the DOM, meaning the element's state (scroll position, input values, etc.) is preserved.

When to Use

Use x-show when you need to show/hide an element frequently and want to keep its internal state. It’s faster than x-if because no DOM elements are created/destroyed. Ideal for dropdowns, tooltips, or tabs where the content is toggled often.

Basic Example

<div x-data="{ visible: true }">
  <button @click="visible = !visible">Toggle</button>
  <p x-show="visible">Now you see me!</p>
</div>

Transition Effects

Combine x-show with x-transition to animate the show/hide behavior. This is extremely powerful and allows you to use Tailwind CSS utilities for animations.

<div x-data="{ open: false }">
  <button @click="open = !open">Animate</button>
  <div x-show="open" x-transition.opacity.scale>
    Animated content
  </div>
</div>

Difference from x-if

• x-show toggles the CSS display property. The element remains in the DOM.
• x-if removes or inserts the element entirely from the DOM.
• Use x-show for toggles that happen often (dropdowns, tooltips).
• Use x-if for content that should be completely removed to save resources (e.g., rarely opened modals).