Interactive tab bar with content
In this guide, we will build an interactive tab bar with individual content per tab.
Interactive prototype - click to interact:
To follow these instructions more easily, we recommended using the same names as we do for each cell. You may download the final project file here.
As a reference, this will be our final structure:

First let’s create the basic elements.
Create a rectangle Tab and place a text element inside. Apply styling as you like. Then set the width to shrink. Also give it a minimum width to make it look more consistent with different content lengths. Optional: Add an indicator for the active state
Now create a widget from it. Next add predefined states Mouse Over and Pressed. We also add a custom state named Active. Apply styling as you like.
Duplicate the Tab widget and group it horizontally. We call this group Tabbar, apply styling as you like.

Next we need a container for our Content: Let's create a rectangle TabContent .
- Set height and width to stretch.
- Create a widget from it.
- Set the content to individual
- Add a custom state called Collapsed .
- In this state, set the visibility to collapsed.
Add content to the TabContentas you like.
The result could look something like this:

Only one element should be active at a time. To achieve this, we add a left click event to our Tab element in the interaction inspector. Then we choose a state change action and select the Active state.

So now the clicked element will be switched to active. Still missing: all the other elements should be switched to the normal state when we activate a tab.
Therefore, we add another action. Select change state but now we do not select "This element" instead, we choose "Siblings with the same widget type". As state we select Normal. This applies the action to all other elements except the selected one.

More information regarding siblings, children, ... can be found here.
The final interaction structure should look like this:

After adding these interactions, it is recommended to duplicate the element with the interactions on in. This will save you from copy-and-pasting all the interactions to different elements.
Try out the interactions and see if everything works accordingly.
Troubleshooting: If one or more elements do not work as inteded, check the linked cells: The tab element should have a asterisk (*), which means that the interaction refers to itself.
Based on the number of tabs you want to have, we need the same number of TabContent elements. Create and fill them now.
Just like with the tabbar we use a similar technique here. Basically we only want to have one TabContent visible at a time with the only difference, that we have to link the specific content element on every tab element interaction.
- Select the first tab
- Add a new group to the existing event
- Link the correct TabContent element
- Switch the widget to the normal state

- Duplicate the action with ⌘ + D
- Like before choose Siblings with the same widget type
- Choose the Collapsed state

The final interaction structure should look like this:

For a smoother transition when switching the content, you can add a Fade in effect after the Change state action.

Now copy the action group to all of your tab elements, but remember to replace the cell linked in the group to the corresponding TabContent element.
Congratulation, you just build your own interactive tab bar that opens its content!
Why not build a Modal dialog now?