BrightLeaf Digital Code Snippet Library

Check out our growing library of code snippets for Gravity Forms!

Custom Tabbed Content Shortcode

GOAL

Creates a tabbed interface by parsing nested div structures into clickable tabs with associated content panels. Supports nested shortcodes and DOM-based parsing.

CONFIGURATION

CSS: Style .tabbed-content-wrapper, .tabbed-content-tabs, .tab-label, .tab-panel
CSS: Define .active class for selected tab and visible panel
Structure: Content must follow specific div nesting (see usage)

USAGE

[tabbed_content]
<div>
<div>Tab 1 Label</div>
<div>Tab 1 content here...</div>
</div>
<div>
<div>Tab 2 Label</div>
<div>Tab 2 content here...</div>
</div>
[/tabbed_content]

NOTES

First tab is active by default
Supports nested shortcodes
Only one panel visible at a time

https://raw.githubusercontent.com/Eitan-brightleaf/snippets/main/Custom%20Tabbed%20Content%20Shortcode.php

Check Out the Code

Loading...