Create Tabs with Divi Show / Hide Button

|

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

Divi Booster

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

15 Comments

  1. So I've got it working, but a bit buggy – I have each tab launching a gallery module, but when I click each "tab" it snaps to the top of the page.

    Reply
    • Okay – so I fixed the snap to top issue – now the gallery I've set up is a bit wonky when each loads – the 4th image across wraps tot he next line until the page is resized.

      Reply
      • Hi Denise, normally Divi adds a class to the last image in each row, and uses that class to remove the right margin on the image. This has the effect of letting all four images fit in one row. However, it looks like the class is not being added here (at least until you resize). I suspect Divi is only applying the class to visible galleries and as such is missing the hidden ones in your page. I'll need to look into this further to see if there's a way I can solve this from within the Show / Hide Button module (and will update here if I figure it out). In the meantime, you should be able to solve it by using some CSS to remove the margin, such as this:

        @media only screen and (min-width: 981px) {
            .et_pb_gallery_item:nth-child(4n) {
                margin-right: 0 !important;
            }
        }
        @media only screen and (min-width:768px) and (max-width: 980px) {
            .et_pb_gallery_item:nth-child(3n) {
                margin-right: 0 !important;
            }
        }
        @media only screen and (max-width:767px) {
            .et_pb_gallery_item:nth-child(2n) {
                margin-right: 0 !important;
            }
        }
        

        If you add it into the Custom CSS box in your current page's Page Settings menu that will ensure the CSS affects galleries on this page only.

        I hope that helps!

        Reply
  2. How or what would I need to modify to have two behavior:

    Hover: Show module (which currently work on click)
    Click: Go to link

    I am guessing JQuery would do it but do you have any insights?

    Reply
  3. When using a group with one tab open on page load, how does that button get the active state?

    It does not seem to be applied until clicked, but it's already open on page load.

    Reply
    • Hey digitalfusion, currently the plugin treats all buttons as inactive initially. But since the active state is controlled by the "dshb-active-button" class, one way to activate a button initially is to set "Show / Hide Button Settings > Advanced > CSS ID & Classes > CSS Class" to "dshb-active-button".

      However, I've been asked about this functionality a few times now, so I'm adding an option for it into the next update (v1.3.9). I'll hopefully be able to release it later this week. Once updated you should be able to active a button initially by enabling the "Show / Hide Button Settings > Active State > Active" option.

      Hope that helps!

      Reply
  4. Awesome feature: thank you for sharing!

    Reply
    • You’re welcome, Dana!

      Reply
  5. HI
    is it possible to show a section when loading the page AND at the same time set the associated button to :active state?
    So that i have the hover effect on page loading.
    Thank you!

    Reply
    • Hey Markus, there's a way to do something similar though not using the :active state. For each of your show / hide buttons, set the same value (e.g. "button-group") at:

      Show / Hide Button Settings > Content > Grouping > Group Name

      This causes "button-group" to be applied as a CSS Class on all the button. It also causes the most recently clicked button to be assigned an additional class "dshb-active-button". Initially no button has this class, but you can apply it manually to the button you want to be active initially, but setting "dshb-active-button" as the CSS Class in:

      Show / Hid Button Settings > Advanced > CSS ID & Classes > CSS Class

      Now you can style the hover state via CSS, such as:

      .button-group.dshb-active-button a:hover {
      color: red;
      }

      I hope that helps / makes sense, but let me know if not. Thanks!

      Reply

Submit a Comment

Your email address will not be published.