Working with tabs

does anyone know how to work with tabs on the same page. so when you click a tab it brings up the information that is associated with said tab.

Hi @justusharris21,

It’s often done with hidden groups and a repeating group. The former hold the tab content (info to be displayed), and the latter contains the tabs themselves. When a tab is clicked, the corresponding hidden group is displayed (usually by means of a Conditional).

Here’s an example with edit mode access. It was actually created for another purpose, but it uses the technique I just described.

1 Like

Hi @justusharris21

I archive that using the below. (these are my Tabs on my website)

I created my pages like this. my content to show on the above tabs

And then I did my workflow like this, when “about us” is clicked, show about us and hide other tabs pages: I repeated these show and hide steps for all my tabs.

Hope you come right.

Hi @sudsy

It seems interesting the way you did your tabs. I’ve been trying to see how did that exactly, but I can’t see how you archived that. Do you mind breaking it down a bit, especially on your rgTabs, I can’t see what you did there :thinking:

Sure. By way of overview, when a tab is clicked, it just saves that tab to a custom state as the “current tab”. Then, a Conditional on each group checks the current tab and makes that group visible accordingly.

In short, check button workflow and group Conditionals.

Hey there, the way I set up tabs is by first creating the menu (buttons or text elements) and any time one is clicked I set the state of the menu to show (element actions>set state>create custom state>show -thats what i called mine) and then just the name of that tab.

so now each time a button is clicked the show state of the menu changes to that buttons value, profile, settings accounts, etc) and then i add a conditional to each tabs page like so

I use a double negative on the first tab because when the page loads thats the one that is shown and it needs to be changed. The rest of the tabs are when state show is x this is visible instead of when state show is not x this is not visible.

Hi @sudsy

I had to study your example carefully and finally got somewhere. This part of bubble I never used. Thanks for this tip.

So I got this part and created my states for my buttons.


I then Created my custom state Tabs and set to it to state type tabs(the one I just created)

@kyleforkey Thank you very much, I will sleep on this. I will get back to it tomorrow morning with a fresh and clear mind maybe I can make sense of it. and get my Tabs working.

Thank you guys. :handshake:

No problem, @mxolisipn. But just to be clear, those are Option Sets - not states. One way to think of them is as “static things” which don’t reside in the database and thus load more quickly. The DB could have been used just as well to create the tab info (and would make more sense if there were a lot of tabs and/or they needed to be dynamic.

Perhaps “Current Tab” would be a bit more descriptive since it’s intended to keep track of the currently selected tab (and there can be only one active tab at a time).

Anyway, hope it helps. :slightly_smiling_face:

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