Alpine.js x-show Directive — Complete Guide with Examples

In this tutorial, you'll learn about the Alpine.js x-show directive. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

The Alpine.js x-show directive conditionally displays elements by toggling their CSS display property, keeping the element in the DOM but hiding it when the expression is false.

What You'll Learn

By the end of this tutorial, you'll use x-show for conditional visibility, chain multiple conditions, combine x-show with transitions, and understand when to prefer x-show over x-if.

Why It Matters

Showing and hiding content based on state is fundamental to interactive UIs. Dropdown menus, modals, tooltips, loading spinners, and accordions all rely on conditional visibility. x-show gives you a simple, performant way to toggle visibility without removing elements from the DOM.

Real-World Use

Doda Browser's bookmark manager uses x-show to filter the bookmark list. As the user types in the search box, bookmarks that don't match get hidden with x-show, keeping the DOM intact for instant re-display when the search is cleared.

Where This Fits in Your Learning Path

flowchart LR
    A["x-model Directive"] --> B["**x-show Directive**"]
    B --> C["x-if Directive"]
    C --> D["x-for Directive"]
    D --> E["Advanced Alpine Patterns"]
    style B fill:#f97316,stroke:#c2410c,color:#fff
    style A fill:#e5e7eb,stroke:#9ca3af,color:#374151
    style E fill:#22c55e,stroke:#16a34a,color:#fff

What is x-show?

x-show evaluates a JavaScript expression and applies display: none to the element when the expression is false. When the expression is true, it removes the display override, reverting to the element's default or CSS-defined display value.

Think of x-show like a stage curtain. The actor (the element) is always on stage. When the expression is false, the curtain closes. When true, the curtain opens. The actor never leaves the stage.

<div x-data="{ isVisible: true }">
  <p x-show="isVisible">This paragraph is visible</p>
  <button @click="isVisible = !isVisible">Toggle</button>
</div>

Expected output: The paragraph is visible initially. Clicking the button hides it. Clicking again shows it.

Multiple Conditions

You can use any JavaScript expression inside x-show, including compound conditions with AND, OR, and NOT.

<div x-data="{ age: 25, hasLicense: true }">
  <p x-show="age >= 18 && hasLicense">You can drive</p>
  <button @click="age += 1">Increase Age</button>
  <button @click="hasLicense = !hasLicense">Toggle License</button>
</div>

Expected output: The message "You can drive" appears only when both conditions are true. Changing either condition toggles visibility.

x-show with x-transition

x-show integrates seamlessly with x-transition for animated show/hide effects.

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle Panel</button>
  <div x-show="open" x-transition:enter="transition ease-out duration-300"
       x-transition:enter-start="opacity-0 scale-90"
       x-transition:enter-end="opacity-100 scale-100"
       x-transition:leave="transition ease-in duration-200"
       x-transition:leave-start="opacity-100 scale-100"
       x-transition:leave-end="opacity-0 scale-90"
       class="p-4 bg-white shadow-lg rounded">
    Animated panel content
  </div>
</div>

Expected output: The panel fades in and scales up when shown, then fades out and scales down when hidden.

x-show vs x-if

x-show toggles display: none while x-if removes the element from the DOM entirely. Use x-show for frequently toggled elements and x-if for rarely changed or expensive content.

<div x-data="{ show: false }">
  <p x-show="show">x-show: element exists but hidden</p>
  <template x-if="show">
    <p>x-if: element removed from DOM</p>
  </template>
  <button @click="show = !show">Toggle</button>
</div>

Expected output: With x-show, inspecting the hidden element shows it in the DOM with display: none. With x-if, the element is completely absent from the DOM when hidden.

Common Mistakes

1. Using x-show with form inputs that need to reset

x-show keeps the input in the DOM. If you hide and show a form, the input values persist. Use x-if to destroy and recreate the form for a clean reset.

2. Expecting x-show to animate without x-transition

x-show toggles display instantly without animation. Always pair with x-transition for smooth visual effects.

3. Using x-show on expensive components

Large DOM subtrees with many bindings should use x-if to free memory when hidden. x-show keeps everything in memory even when hidden.

4. Forgetting that display: none affects layout

Hidden elements with x-show still occupy space in some layout contexts if the element has display: flex or other non-static display values. x-show sets display: none, which removes the element from layout flow.

5. Nesting x-show on the same element

Only use one x-show per element. For multiple conditions, combine them with && or || operators.

Practice Questions

1. What CSS property does x-show toggle? It toggles the display property between none (hidden) and the element's default display value (visible).

2. How is x-show different from x-if? x-show hides the element with CSS (it stays in the DOM). x-if removes the element from the DOM entirely.

3. When should you use x-show over x-if? Use x-show for frequently toggled elements (dropdowns, modals, tooltips). Use x-if for rarely toggled or initialization-heavy content.

4. Can x-show use complex JavaScript expressions? Yes. Any expression that evaluates to a boolean works: comparisons, function calls, property access, and logical operators.

5. Does x-show work with SVG elements? Yes. x-show works on any HTML or SVG element, including g, rect, circle, and text elements.

Challenge

Build an accordion component with three sections. Each section uses x-show to toggle its content panel. Only one section should be open at a time. Use x-transition for smooth open/close animations.

FAQ

Mini Project

Build a multi-step form wizard with x-show. Each step is a div with x-show bound to a currentStep variable. Include Previous and Next buttons that change the step. Show a progress indicator at the top. Use x-transition for slide animations between steps.

<div x-data="{ step: 1, form: { name: '', email: '', plan: 'basic' } }">
  <div class="flex gap-2 mb-4">
    <template x-for="s in 3" :key="s">
      <div :class="step >= s ? 'bg-blue-500' : 'bg-gray-300'" class="w-8 h-8 rounded-full flex items-center justify-center text-white text-sm" x-text="s"></div>
    </template>
  </div>
  <div x-show="step === 1" x-transition>
    <h3>Step 1: Name</h3>
    <input x-model="form.name" placeholder="Your name" class="w-full p-2 border rounded">
  </div>
  <div x-show="step === 2" x-transition>
    <h3>Step 2: Email</h3>
    <input x-model="form.email" placeholder="Your email" class="w-full p-2 border rounded">
  </div>
  <div x-show="step === 3" x-transition>
    <h3>Step 3: Plan</h3>
    <select x-model="form.plan" class="w-full p-2 border rounded">
      <option value="basic">Basic</option>
      <option value="pro">Pro</option>
    </select>
  </div>
  <div class="mt-4 flex gap-2">
    <button @click="step = Math.max(1, step - 1)" :disabled="step === 1" class="px-4 py-2 bg-gray-200 rounded">Previous</button>
    <button @click="step = Math.min(3, step + 1)" :disabled="step === 3" class="px-4 py-2 bg-blue-500 text-white rounded">Next</button>
  </div>
</div>

What's Next

Continue learning conditional rendering:

Related topics: CSS display property, JavaScript boolean expressions.