# How to use conditions to hide and show elements in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Bubble's Conditional tab lets you dynamically show and hide elements based on data, user roles, custom states, or URL parameters. This tutorial covers setting up visibility conditions, understanding the Collapse when hidden property, managing role-based visibility, and avoiding common performance pitfalls with hidden elements.

## Overview: Conditional Element Visibility in Bubble

Controlling what users see based on their role, the app state, or data conditions is fundamental to building interactive apps. Bubble provides several mechanisms for this — the Conditional tab, the This element is visible on page load checkbox, and workflow actions. This tutorial covers all three approaches and when to use each.

## Before you start

- A Bubble app with at least one page and some elements
- Basic understanding of Bubble's Property Editor and Conditional tab
- Familiarity with dynamic expressions and data sources

## Step-by-step guide

### 1. Set initial visibility with This element is visible on page load

Select any element on your page. In the Property Editor, find the checkbox labeled This element is visible on page load. When unchecked, the element starts hidden and must be shown by a condition or workflow action. This is useful for modals, error messages, success confirmations, and content that should only appear after a user action.

**Expected result:** The element is hidden by default when the page loads, waiting for a condition or action to reveal it.

### 2. Add conditions in the Conditional tab to toggle visibility

Select the element and click the Conditional tab in the Property Editor. Click Define another condition. Set the When field to a dynamic expression that evaluates to yes or no — for example: When Current User's role is Admin, or When CustomState is yes, or When Input's value is not empty. Then set the property This element is visible to yes (or no). You can add multiple conditions. Conditions are evaluated top to bottom, with the bottom condition overriding conflicting properties from conditions above.

> Pro tip: If multiple conditions conflict on the same property, the last (bottom) condition wins. Drag conditions to reorder them.

**Expected result:** The element shows or hides dynamically based on your specified conditions.

### 3. Use Collapse when hidden for proper layout flow

By default, hidden elements still occupy space on the page — they are invisible but their layout footprint remains. Check the Collapse when hidden checkbox in the element's Layout properties (or the Property Editor). When an element is both hidden and collapsed, it is removed from the layout flow, and surrounding elements shift to fill the gap. This is essential for clean responsive design.

> Pro tip: Always enable Collapse when hidden unless you specifically need to reserve space for the element when it reappears.

**Expected result:** Hidden elements no longer take up space, and the page layout adjusts dynamically.

### 4. Control visibility with workflow actions

In addition to conditions, you can use workflow actions to show and hide elements. In a workflow, add Element Actions → Show element or Element Actions → Hide element. This is useful when visibility should change in response to a specific event (button click, page load, timer) rather than a continuous data condition. Workflow-driven visibility overrides the default and conditional settings.

**Expected result:** Elements can be shown or hidden in response to specific workflow events like button clicks.

### 5. Build role-based visibility for admin content

To show certain elements only to admins: set the element as not visible on page load. Add a condition: When Current User's role is Admin, set This element is visible to yes. For security, remember that hidden elements' static content is still accessible in the browser's source code. For truly sensitive data, use Privacy Rules on the Data Type to prevent the data from being sent to the client at all.

> Pro tip: Hidden elements only hide the UI — the data behind them may still be sent to the browser. Use Privacy Rules for actual data security.

**Expected result:** Admin-only elements are visible to admin users and hidden from regular users.

## Complete code example

File: `Workflow summary`

```text
CONDITIONAL VISIBILITY SUMMARY
================================

METHOD 1: Default Visibility
  Element property: This element is visible on page load
    ☑ = visible by default
    ☐ = hidden by default

METHOD 2: Conditional Tab
  Element → Conditional tab → Define condition:
    When [expression is true]
      → This element is visible: yes/no
  
  Examples:
    When Current User's role is Admin → visible: yes
    When SearchInput's value is empty → visible: no
    When CustomState_showPanel is yes → visible: yes
    When Current Page's URL contains ?tab=settings → visible: yes

METHOD 3: Workflow Actions
  Event → Action: Show element: ElementName
  Event → Action: Hide element: ElementName
  Event → Action: Toggle element: ElementName

LAYOUT:
  Collapse when hidden: ☑ (recommended)
    → Element removed from layout flow when hidden
    → Surrounding elements shift to fill gap
  Collapse when hidden: ☐
    → Element invisible but occupies space

PRIORITY ORDER:
  Workflow actions > Conditional tab > Default visibility

ROLE-BASED EXAMPLE:
  AdminPanel group:
    - Visible on page load: no
    - Conditional: When Current User's role is Admin
      → This element is visible: yes
    - Collapse when hidden: yes

SECURITY NOTE:
  Hidden elements ≠ secure elements
  Static content in hidden elements is still in the HTML
  Use Privacy Rules for actual data security
```

## Common mistakes

- **Relying on hidden elements for security** — Hidden elements are only visually hidden — their content is still in the page HTML and accessible via browser developer tools Fix: Use Privacy Rules on Data Types to prevent sensitive data from being sent to the client in the first place
- **Forgetting to check Collapse when hidden** — Without this, hidden elements leave empty gaps in your layout, causing awkward spacing Fix: Enable Collapse when hidden on every element that you conditionally hide, unless you need to reserve its space
- **Using too many Show/Hide workflow actions instead of conditions** — Workflow actions only run once at trigger time. If the underlying data changes later, the visibility does not update automatically. Fix: Use the Conditional tab for data-dependent visibility so it re-evaluates continuously. Use workflow actions for one-time event-driven changes.

## Best practices

- Use the Conditional tab for data-driven visibility that should update automatically
- Use workflow Show/Hide actions for event-driven visibility changes (button clicks, form submissions)
- Always enable Collapse when hidden unless you specifically need to reserve layout space
- Remember that conditions are evaluated top to bottom — the last matching condition wins
- Use Privacy Rules for actual data security, not just element hiding
- Keep the number of conditionals per element manageable (under 5) for maintainability

## Frequently asked questions

### Does hiding an element stop it from loading data?

No. Hidden elements with data sources still load their data from the database, consuming WUs. To prevent data loading, remove the data source or use a condition on the data source itself.

### Can I animate elements when they appear or disappear?

Bubble supports basic transitions. In the element's Appearance tab, set a transition effect. For more complex animations, use the Animate.css plugin or custom CSS via an HTML element.

### What is the difference between Show/Hide workflow actions and conditions?

Conditions re-evaluate continuously whenever the referenced data changes. Workflow actions execute once when triggered. Use conditions for dynamic state and actions for one-time events.

### Can I conditionally show elements based on URL parameters?

Yes. Use the expression Get data from page URL with the parameter name. For example: When Get URL parameter tab is settings, show the settings panel.

### Do hidden elements affect page performance?

Yes. Hidden elements are still in the DOM and their data sources still load. Pages with many hidden elements are slower than pages where those elements do not exist. For maximum performance, use separate pages instead of hiding large sections. RapidDev can help optimize page performance for complex apps.

### How do I toggle an element visible and hidden with a single button?

Use a custom state (type: yes/no) on the button or page. The button's workflow toggles the state. The element's condition checks the state value. Or use the Toggle element action if available.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/use-conditions-to-hide-and-show-elements-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/use-conditions-to-hide-and-show-elements-in-bubble