Tabs BBCode

[Chico Gois]

Tabs BBCode Extension for phpBB 3.3

Description
Adds support for tabbed content inside posts using BBCode.

Features

• Tabbed content layout
• Optional Font Awesome icons
• Optional per-tab colors
• Responsive design
• Automatic accordion mode on mobile
• Persistent active tab
• Direct links (Deep linking #tab-1)
• Accessible markup (ARIA)
• Keyboard navigation
• Compatibility with [code], [quote], and [url] inside tabs

Installation

1. Copy files to: ext/mundophpbb/tabsbbcode
2. Go to ACP → Customise → Extensions
3. Enable the "Tabs BBCode" extension
4. Purge the forum cache

BBCodes

Tabs container

[tabs]{TEXT}[/tabs]

Single tab

[tab={SIMPLETEXT}]{TEXT}[/tab]

Basic example

Código: Selecionar todos

[tabs]
[tab=PHP]PHP tab content.[/tab]
[tab=JavaScript]JavaScript tab content.[/tab]
[tab=CSS]CSS tab content.[/tab]
[/tabs]

Example with Font Awesome icons

Código: Selecionar todos

[tabs]
[tab=fa-code PHP]PHP content.[/tab]
[tab=fa-js JavaScript]JavaScript content.[/tab]
[tab=fa-css3 CSS]CSS content.[/tab]
[/tabs]

Example with colors

Available colors: red, blue, green, orange, purple, teal.

Código: Selecionar todos

[tabs]
[tab=red PHP]PHP content.[/tab]
[tab=blue JavaScript]JavaScript content.[/tab]
[tab=green CSS]CSS content.[/tab]
[/tabs]

Example with colors and icons

Código: Selecionar todos

[tabs]
[tab=red fa-code PHP]PHP content.[/tab]
[tab=blue fa-js JavaScript]JavaScript content.[/tab]
[tab=green fa-css3 CSS]CSS content.[/tab]
[/tabs]

Notes

• Recommended format: [tab=Title]Content[/tab]
• For icons: [tab=fa-icon-name Title]Content[/tab]
• For colors: [tab=color Title]Content[/tab]
• For colors with icons: [tab=color fa-icon Title]Content[/tab]
• Emoji is not used in official examples to avoid charset issues in some databases