Make tab 1 default upon page load

[janernestgo]

I’ve recently figured how to make a tabs using custom states by following the tab element available in bubble io. However, I noticed that tab 1 is not by default, hence the contents are invisible at page load.

Any tips how make tab 1 default?

[mikeloc]

Hi there, @janernestgo… you should be able to set a default value for the custom state (you can do that in the same place where you set up the custom state) or you could use a workflow to set the custom state to tab 1 when the page is loaded.

Hope this helps.

Best…
Mike

[janernestgo]

@mikeloc Value is currently at 1.

But you can see my tabs that tab 1 is not the default. This results the tab 1 content to be invisible because it is not current.

[janernestgo]

I can change this to “when page is loaded”? That will set the tab 1 by default?

[janernestgo]

Yes @mikeloc I have, while the other tabs are not visible on page load, as well as collapsed when hidden.

[mikeloc]

I would go to the area where you set up the custom state and give it a default value of 1.

[mikeloc]

I don’t think you should have the This element is visible on page load box checked in that screenshot. What are the conditionals on that element?

[janernestgo]

Set state has a value of 1. Albeit the trigger is when the tab menu “personal information is clicked”.

[mikeloc]

That’s not the default value. Go to the Group Tab element in the editor and click the icon to access the element’s custom states… that is where you set the default value.

[janernestgo]

This one? Then I should add a new custom state, right?

[mikeloc]

The custom state called current tab is on the element called Group Tab, not the Group Tab personal information element.

[janernestgo]

This one? How’d you know where the custom state was? Is it always like the parent container/group?

[mikeloc]

Yes, that one. In your screenshot that shows the workflow action, it shows the element with which the custom state is associated, and no, it’s not always the parent/container group (you can put a custom state on any element or page). Anyway, in that screenshot, set the default value field to 1.

[janernestgo]

Hi @mikeloc that worked! How’d that happen. Quite frankly, I am still studying customs states, I did follow and explore the default tab element that comes w/ bubble, hence set state was via the workflow.

[mikeloc]

You still need to set the state via a workflow so when a user clicks on one of the tabs, the appropriate content is shown. You were just missing that default value, so nothing was going to show up on the page until the user clicked one of the tabs.

[janernestgo]

I understand. Thank you @mikeloc for your help! Very much appreciated!