Download The Child-Theme

Nestable Tabs Element in Bricks Builder

Table of Contents

Example

Here you can see a full working example.

Content #1

Content #2

Video Walkthrough

Step-by-step guide

The Step-by-Step Instructions always assume that you have installed the child-theme. If not you will have to manually enqueue the script/styles.

Create the Layout

The Tabs-Element only needs a Wrapper-Element with a specific ID. After that only create containers for the links and content and place your text inside of it:

Assign an ID to the Wrapper-Element as seen in the Screenshot!

Assign Classes to Content and Link-Wrapper

Every Content and Link-Wrapper needs a specific class. For the links .wcd_tab_link. For the Content .wcd_tab_content

Style the active State

To style the active state just assign any link-wrapper a class of wcd_tab_link_active as seen in the screenshot below. You can use the class-styling feature of Bricks to do that visually!
It doesn’t really matter which link get’s that class as it will be overwritten on page load anyway!

Make sure to keep that class on the Element. DON’T remove it. As Bricks won’t load that class styles if you haven’t assigned it to at least one element on the page!

Enqueue and Initialize the Tabs-Element

That’s it. All you need to do now is copy & paste that code below into a code-block on your site. Just make sure that you have my child-theme installed, otherwise you would need to load the full-source code before.

<?php

wp_enqueue_script('wcd_tabs');

add_action('wp_footer', function() {
  
  ?>

<script>
  const myTabs = new WCD_tabs({
    target: '#myTabsElement',    
    defaultOpen : 0,   
    
  });
  
</script>
 
<?php

}, 99);


?>	

Options & Parameter to adapt

As you maybe saw in the Code above, there are a few options you can adapt to change the behaviour of the Mega-Menu:
Option Name Type Default Value Note
targetString-

ID of the Wrapper-Element. Don't forget to include the hash-sign (#)!

defaultOpenInteger-

Index of the active Element on Page Load. Count from 0 upwards!

Full Source Code

This Section get's updated automatically and always shows the latest Version of the source-code. You can copy & paste that code if you haven't installed the child-theme.
https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/tabs/wcd_tabs.js