Example
Here you can see a full working example.
Link #1
Link #2
Content #1
Content #2
Video Walkthrough
Step-by-step guide
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
| Option Name | Type | Default Value | Note |
|---|---|---|---|
| target | String | - | ID of the Wrapper-Element. Don't forget to include the hash-sign (#)! |
| defaultOpen | Integer | - | Index of the active Element on Page Load. Count from 0 upwards! |
Full Source Code
https://raw.githubusercontent.com/Wolfi1616/Bricks-Tutorial-Elements/main/snippets/tabs/wcd_tabs.js