A common web design pattern is to show and hide content when the user clicks on different tabs. While TIME Sites does not have a dedicated component for tabs, you can create them using Interactions.

If this is your first time exploring TIME Sites' 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:

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!
​

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

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:

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:

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 TIME Sites! 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.
​

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.

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”:

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.

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