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.
Prerequisites
- 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
Set initial visibility with This element is visible on page load
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.
Add conditions in the Conditional tab to toggle visibility
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.
Use Collapse when hidden for proper layout flow
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.
Control visibility with workflow actions
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.
Build role-based visibility for admin content
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 working example
1CONDITIONAL VISIBILITY SUMMARY2================================34METHOD 1: Default Visibility5 Element property: This element is visible on page load6 ☑ = visible by default7 ☐ = hidden by default89METHOD 2: Conditional Tab10 Element → Conditional tab → Define condition:11 When [expression is true]12 → This element is visible: yes/no13 14 Examples:15 When Current User's role is Admin → visible: yes16 When SearchInput's value is empty → visible: no17 When CustomState_showPanel is yes → visible: yes18 When Current Page's URL contains ?tab=settings → visible: yes1920METHOD 3: Workflow Actions21 Event → Action: Show element: ElementName22 Event → Action: Hide element: ElementName23 Event → Action: Toggle element: ElementName2425LAYOUT:26 Collapse when hidden: ☑ (recommended)27 → Element removed from layout flow when hidden28 → Surrounding elements shift to fill gap29 Collapse when hidden: ☐30 → Element invisible but occupies space3132PRIORITY ORDER:33 Workflow actions > Conditional tab > Default visibility3435ROLE-BASED EXAMPLE:36 AdminPanel group:37 - Visible on page load: no38 - Conditional: When Current User's role is Admin39 → This element is visible: yes40 - Collapse when hidden: yes4142SECURITY NOTE:43 Hidden elements ≠ secure elements44 Static content in hidden elements is still in the HTML45 Use Privacy Rules for actual data securityCommon mistakes when using conditions to hide and show elements in Bubble.io: Step-by-Step Guide
Why it's a problem: Relying on hidden elements for security
How to avoid: Use Privacy Rules on Data Types to prevent sensitive data from being sent to the client in the first place
Why it's a problem: Forgetting to check Collapse when hidden
How to avoid: Enable Collapse when hidden on every element that you conditionally hide, unless you need to reserve its space
Why it's a problem: Using too many Show/Hide workflow actions instead of conditions
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to show and hide different sections of my Bubble.io app based on the user's role (Admin, Vendor, Buyer). Some sections should also show/hide based on button clicks. What is the best approach for conditional visibility?
Set up role-based visibility on my dashboard page. Admin users should see a management panel, vendors should see their product list, and buyers should see their order history. Use conditions and proper collapse settings.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation