Struggling to show/hide elements at scale

Need help
1

Hi all,

I am new to Bubble.io and am trying to build a web based SPA. There are many different tabs within my menus which will then show/hide hundreds of different elements. For example lets say there are 9 different menu buttons and each menu selection would have a dashboard of 8 different element reports.

I am looking to create a simple workflow that would mean when Menu Button 1 is pressed only those reports are shown and the remaining 8 menu reports are hidden.

What is the best way to do this? I have tried custom states but struggling to wrap my head around them.

2

Custom states are definitley the way to do this, so it’s worth spending some time getting to grips with them.

Put simply, you just need conditions on your elements to only be visible when a custom state has a certain value, then set that value when a specific button is pressed.

That way you can show and hide multiple elements with a single workflow.

3

Thanks, I think I’m slowly getting there but would it at all be possible to share an example of how to hide all elements bar a select few?

Would really appreciate any insight

4

I’d think about this from the opposite direction…instead of hiding everything but a few, think about only showing a few. Here’s what I mean:

  • By default, everything is hidden
  • I’d have a custom state on your Menu Bar called “active tab”
  • When I click a Menu Button, I would set the “active tab” custom state to be equal to some text, something like the name of the Menu Button
  • On the elements that you want to show, you would use a conditional that says, “When Menu Bar’s “active tab” is , this element is visible”
  • You can copy that logic for every element, but replace the custom state value.

Does that make sense?

2 Likes
5

That does make perfect sense but I have one question. If I then hit menu button 2 which had conditions to make x and Y elements visible would that not mean that the Menu button 1 and Menu button 2’s elements are showing at the same time?

Or would it automatically hide the elements of menu button 1?

6

It would automatically hide them, because the condition that makes them visible is no longer true! This is exactly how I build my single page apps and I was pleasantly surprised at the little magic :smiley:

7

All good advice from @andrewgassen and @patrickhorridge. :+1:t2:

Here’s a working example of how I do it. (Custom states, custom workflows)

With a Single Page Application - as the number of screens grows you need a way of managing that complexity. The way I do it is explained here:

And view it in the Editor here:

There are many ways, this is where i have currently evolved to.

3 Likes
8

This topic was automatically closed after 70 days. New replies are no longer allowed.