Creating Tabs using the Divi Show / Hide Button Module

|

The Divi Theme includes a tab module for creating tabbed content. However, if you want more flexibility, here's how you can use Divi buttons to create a tabs.

Creating Tabs with the Divi Show / Hide Button Module

I created the Divi Show / Hide Button Module as an easy way to reveal, hide and toggle content using a Divi-style Button. It can be used to create tabs as follows:

1. Create your Content

First create the sections, rows or modules you want to use as your tabs. It doesn't matter where you place them on the page, but they should be placed one after another, vertically. For example, here are three text modules that I'll use in this example:

Content of Tab 1

Content of Tab 2

Content of Tab 3

2. Give Each Tab an ID

Open the settings for the first module (or row, or section). Locate the CSS ID setting at:

Module Settings > Advanced > CSS ID & Classes > CSS ID

Now enter a name for the CSS ID, like so:

You can choose any name you like, but it should:

  • Avoid spaces and symbols (hyphens are okay)
  • Be unique – i.e. not used elsewhere on the site

Now do the same for the other modules (or rows or sections), Give each a different CSS ID. For my example, I'll use "mytabs-tab2" and "mytabs-tab3".

3. Add a Divi Show / Hide Button for Each Tab

Now add a Divi Show / Hide Button Module for the first tab. Assuming you've installed Divi Show / Hide Button, you'll find it in the Insert Module menu as shown:

Set the button text at:

Divi Show / Hide Button Settings > Text > Button Text

Save and close the button settings for now. We'll finish configuring them shortly.

Now, similarly, add Show / Hide Button Modules for the other tabs.

You can place the buttons anywhere you like. Here I'm using a three-column row to line the buttons up horizontally:

Content of Tab 1

Content of Tab 2

Content of Tab 3

4. Hide Tabs on Page Load
As it currently stands, we can see all tabs initially. What we probably want is to initially hide either a) all the tabs, or b) hide all but the first tab. Divi Show / Hide Button module comes with an option to hide elements (such as our text boxes) when the page first loads. 

To hide an element, go to:

Show / Hide Button Settings > Content > When Page Loads…

And set:

  • Hide these Elements – to the CSS ID of the tab corresponding to the button, preceded the CSS ID with a '#'.

So in our example, we'll leave the first tab visible and hide the second and third tabs on page load. So in the second button module (corresponding to the second tab), we enter the CSS ID of the second tab "mytabs-tab2", like so: 

We then repeat the procedure for the third button / tab.

Here's our example now:

Content of Tab 1

Content of Tab 2

Content of Tab 3

5. Configure the Divi Show / Hide Buttons' Click Actions

Now it's time to tie it all together by telling the Divi Show / Hide Buttons what to do when they're clicked. Basically, when we click on a button we want it to make its corresponding tab visible, and hide the other tabs.

Starting with the first show / hide button, go to:

Divi Show / Hide Button Settings > When Button Clicked…

And set:

  • Show these Elements – to the CSS ID of the tab it should show, preceding the CSS ID with '#')
  • Hide these Elements – to the CSS IDs of the other tabs, again preceded with a '#', and separated by commas
  • Toggle these Elements – leave blank

The settings should look something like this:

Repeat the process for the other Divi Show / Hide Buttons. So button two will show tab 2 and hide tabs 1 & 3, and so on.

We should now have the final result as below…

Try It Out

Content of Tab 1

Content of Tab 2

Content of Tab 3

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *