Forum Academy Marketplace Showcase Pricing Features

'Hide All Except X Group' Workflow Feature?

Right now I’ve got a site that I’m giving a ‘single-page’ look by having most all of the content be hidden/revealed groups. My workflows are getting quite cumbersome, however, as each time the user clicks on an element to reveal one group the site also executes a growing number of ‘hidings’ for any other group that might currently be visible. Since the user’s roadmap is not linear, i.e. he/she can navigate to a variety of groups from a variety of groups, I need to hide every-group-but-the-one-I-want-to-reveal each time. It’s getting clunky the larger the site grows.

Example:
-user clicks button “Show Settings”
-workflow: Hide Group Group 1, Hide Group 2, Hide Group 3, Hide Group 4, Hide Group 5, Show Group Settings

Is there a better way to do this? Like a 'Hide All Except X Group" feature?

Thanks in advance!

I’d definitely use custom states on this. Here’s what I do:

For each group, in the conditions, I set up 2 conditions: When is true, this element is visible. When is false, this element IS NOT visible.

Usually, it looks like this:

When “Group Left Nav’s custom state of activeIndex = Blog,” this element (Group Blog) is visible.
When “Group Left Nav’s custom state of activeIndex is not Blog,” this element (Group Blog) is not visible.

3 Likes

Interesting; seems like the opposite of what I’m doing and subsequently much cleaner. How do you have the 'custom state of activeIndex = Blog" set up? Or rather, how does Bubble know you’ve selected a choice from something?

I am using something similar.

For each group I have a conditional statement that makes the group visible only when the custom state is set to that group. Then, on the menu item workflow, the custom state gets set when the menu button is clicked.


Hope that helps.

Best,
Todd


GetBaker.com

5 Likes

I do exactly what @toddmbaker does

1 Like

What Type is the Custom State?

Typically a text field (not really any constraints that way)

1 Like

This is great! Hmmm…I had all my groups Fade In. Anyway to accomplish the same using this method?

Ooo, tricky. I’m not sure if there’s a way or not, I haven’t gotten around to doing anything fancy on any of my apps yet

Transitions tab?

Not really any great options there

I figured it out - just set the next step in the WF to animate

3 Likes

Well howabout that, that’s pretty handy. Nice job!

1 Like

Lol, I had like 3 different custom states going before I realised it was way overcomplicated :dizzy_face:

Perfect!! Thanks all.

I use a single condition in the form of “when [observed value] isn’t [expected value], set visibility to false.” This avoids having to make elements hidden in the editor.

The only reason I don’t do that is I don’t like the effect of having a bunch of groups on the page, then pop out of the page. I’m assuming you are setting visible on page load = true for all your things, then adjusting it from there?

I definitely see that happening for certain layouts. For making sets of groups that react to a menu based navigation (displaying a single group while hiding everything else), I haven’t experienced that UI behavior.

These are great solutions; thanks everyone.

When I implement @Scott 's method, I notice that groups ‘jump’ into view when called the first time (despite having a Fade-In assigned after the State reaction), but on subsequent clicks they behave smoothly and Fade. I have been only working with the Editor preview; is there some sort of compiling that’s done that may eliminate this in the Live version? Or is there a way to mitigate this non-fluid motion?

I forgot to mention that I don’t enable animation when collapsing for the method I described earlier.