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?
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.
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?
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.
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.
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?
