A common web design pattern is to show and hide content when the user clicks on different tabs. While Brandcast does not have a dedicated component for tabs, you can create them using Interactions.
If this is your first time exploring Brandcast’s Interactions framework, you may want to familiarize yourself with it first. This tutorial is fairly advanced and assumes some knowledge of how interactions work.
Remember that this is different than creating navigation that takes users to different parts of the website — for an overall site navigation, you should rely on a simple Link List element, or other clickable links. The technique described here is for when you want tabbed content to appear within a larger page design, without redirecting the user to a different page.
Overall, the steps you’ll take to build these tabs are:
- Create your tab components. (We’ll use two in this example.)
- Create all the content that’s going to appear under the tabs.
- Place each tab’s content inside a parent container.
- Then put each of those inside another parent container. Set its height to 0 and turn on “Hide Overflow.”
- Now create the page's “default” state, by hiding the content associated with the second tab. Do this by changing the container’s positioning to "fixed-to-parent."
- Create an interaction with the second tab as the trigger. Set the trigger type to “turn on”. Add the first tab as an additional trigger, with the type set to “turn off”.
- While in interaction mode, make the second tab’s content visible by setting its container to "position: normal."
- While still in Interaction mode, make the first tab’s content hidden by setting its container to "position: fixed-to-parent.”
If you have more than two tabs, repeat steps 6-8 for each additional tab.
A more detailed, step-by-step breakdown of this process follows below!
1: Create the Tab Components
These can really be anything you want — text elements, buttons, images, whatever you want the user to click to activate the different tabs. For this example, we’ll create a 2-column grid and put a container in each one, and text in each container:
So that the user can tell which tab is active, we’ll also make the first tab “active” by giving it a different background color.
2: Create the Tab Content
Before worrying about any of the interactivity, you’ll want to create all your content, style it, and make sure that it all looks good. Once you start showing and hiding things, it gets a bit harder to work with, so it’s a good idea to get everything squared away before you start creating the interactions.
For our “Agenda” example, we’ll create a layout that we can use to enter event names, times, and locations:
3: Place Tab Content in Containers
Each tab’s content should be placed inside a parent container. So, your page structure will look something like this:
Then set each parent container's height to “0” using the Dimensions Panel, and check the “Hide Overflow" option:
4: Place Each Content Container in Another Container
Each of the tab content containers you’ve created should now be placed inside of another, additional parent container.
Your overall structure will then look something like this:
While this may seem like an unnecessary amount of hierarchy, it’s actually going to be the basis of our ability to show and hide tab content. We will be relying on changing each content container’s positioning between “normal” and “fixed-to-parent.” Because its parent is set to “height: 0" and “overflow: hidden", whenever a content container’s positioning is “fixed-to-parent”, it will disappear from the page.
This is by no means the only way to show and hide content in Brandcast! But we’ve found it to be the easiest to manage for design elements like tabs — in particular because it allows all your content to remain in flow on the page, and because showing / hiding requires only a single change to a single attribute.
5: Create the Default State
Typically, the default state of the page means that the first tab is “on”, and all the other tab content is hidden. So we’ll create this default state by hiding the second tab’s content.
To hide it, we select the container that houses the second tab’s content, and change its positioning to “fix to parent element” using the Positioning Panel:
If you’ve set up everything correctly, you should immediately see the second tab’s content become hidden on the page.
6: Create an Interaction for the Second Tab
With the page's "default" state looking good, we’re now ready to create the interaction that will turn the second tab on and reveal its content.
Select the tab, and using the Interactions Panel, add a new interaction. (In this example we'll call the interaction "Tab 2".)
By default, the trigger type will be “toggle”, but since tabs generally don’t toggle on and off when you click the same one, we should change it to “turn on”:
We will also need to place a trigger on the first tab, since clicking it should turn the second tab off. Select the first tab and add an additional trigger, and set the type to “turn off”:
7: Reveal the Second Tab’s Content
While still in interaction mode, we will reveal the second tab’s content by selecting its container, and changing its positioning to “normal” via the Positioning Panel.
Since this container is currently hidden, you won't be able to select it on the stage. You’ll need to use the Page Structure panel to locate and select the container:
Then set its positioning back to "normal" using the Positioning Panel. This should cause it to immediately appear on the stage.
8: Hide the First Tab’s Content
The interaction now reveals the second tab's content when the tab is clicked. The other thing it's going to have to do when it's clicked is hide the content associated with the first tab.
While still in interaction mode, select the content container, and set its positioning to “fixed to parent”:
Our tabs should now be functioning properly.
The last thing we’ll do in this example is — while still in interaction mode — change the background colors of the two tabs. This will swap which tab appears “active” as part of our interaction:
Finally, you can exit interaction mode, and switch to preview mode to check your work.
You should see that when you click back and forth between the two tabs, the different content containers are shown and hidden, as their positioning switches between “normal” and “fixed-to-parent”.
- If you’re working with more than two tabs, you can repeat the process of creating another interaction for the third, the fourth, and so on. Keep in mind that each additional tab will have to be added as a “turn off” trigger for every other interaction.
- If you want to add a bit more personality to the tab transitions, you can also have each tab’s content container switch from 0% to 100% opacity during the interaction. This adds a nice “fade-in” effect when the user selects a tab.
- If you’ve set up all your tab interactions and then discover you need to edit the content, remember that you can use the preview button (the eyeball) in the Interactions Panel to temporarily reveal the content without changing any of its styling.
- This same basic approach can be extended to other similar design elements — accordions, for example, or expandable “read more” content sections.