Download The Child-Theme

Dynamically opened Index in Tabs-Element

Snippet can be applied to the following tutorial(s)

Nestable Tabs Element in Bricks Builder

When navigating to the site which contains your tabs-element you may want to show different tabs depending on the site/content you’re coming from. You can easily do that by just changing Step 4 in the tutorial (link above) to the following code:



add_action('wp_footer', function() {
  isset($_GET['tab']) ? $index = $_GET['tab'] : $index = 0;

  const myTabs = new WCD_tabs({
    target: '#myTabsElement',    
    defaultOpen : <?php echo $index; ?>,   

}, 99);


I’ve added the following lines:

isset($_GET['tab']) ? $index = $_GET['tab'] : $index = 0;

What this line does is that it looks for an addition in the URL , if it is set then the defaultOpen variable below gets that value, if not it’s still 0. If you want to have a different defaultValue make sure to change $index = 0 to whatever you would like to have!

defaultOpen:<?php echo $index;?>,

Here we are taking the variable defined above and pass it to the Tabs-Element!


So how does it work now? Assuming that you have changed your code, you can now set up your links.

Let’s assume that your homepage is and your tabs-element is placed on

You have several pages and you want to dynamically target the tabs from there. All you need to do is placing a link on those pages like so:

That would navigate to your landing-page with the 4th tab opened by default (remember that you have to count from 0 upwards).


If you want to combine that with an anchor-Link it would look this way:

So the $_GET Parameter has to be placed before your Anchor!