# Discourse BBCode Tabs Plugin
**URL:** https://meta.discourse.org/t/discourse-bbcode-tabs-plugin/367505
**Category:** Extras
**Created:** [May 25, 2025, 3:26am UTC](https://meta.discourse.org/t/discourse-bbcode-tabs-plugin/367505 "2025-05-25T03:26:00Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@cuo\_wu](https://meta.discourse.org/u/cuo_wu)
#### Post date: [May 25, 2025, 3:26am UTC](https://meta.discourse.org/t/discourse-bbcode-tabs-plugin/367505/1 "2025-05-25T03:26:01Z")
Download [nodeloc/discourse-bbcode-tabs](https://github.com/nodeloc/discourse-bbcode-tabs)
Demo [(重发)【测试留档】tianlicloud 香港精品 - 评测 - NodeLoc](https://nodeloc.cc/t/topic/44794)
Demo Image
# Discourse BBCode Tabs Plugin
This plugin adds support for tabbed content in Discourse posts using BBCode syntax. It allows users to create multiple tabs with different content that can be switched between without reloading the page.
## Features
- Create tabbed interfaces in posts using simple BBCode syntax
- Full markdown support inside tabs
- Tabs work with both light and dark themes
- Responsive design for mobile devices
- Keyboard navigation (arrow keys) between tabs
- Tab selection is remembered between page loads
## Installation
Follow the [plugin installation guide](https://meta.discourse.org/t/install-a-plugin/19157):
```bash
cd /var/discourse
git clone https://github.com/nodeloc/discourse-bbcode-tabs.git plugins/discourse-bbcode-tabs
./launcher rebuild app
```
## Settings
This plugin provides several site settings that can be configured in the Discourse admin interface under Plugins \> BBCode Tabs:
- **bbcode\_tabs\_enabled** : Enable or disable the BBCode Tabs plugin (default: true)
- **bbcode\_tabs\_first\_tab\_active** : Automatically select the first tab by default (default: true)
- **bbcode\_tabs\_remember\_selection** : Remember tab selection between page loads (default: true)
## Usage
You can add tabbed content to your posts using the following BBCode syntax:
```plaintext
[tabs]
[tab=Tab Title 1]
Content for tab 1
[/tab]
[tab=Tab Title 2]
Content for tab 2
[/tab]
[tab=Tab Title 3]
Content for tab 3
[/tab]
[/tabs]
```
The first tab will be selected by default.
## Examples
### Basic Example
```plaintext
[tabs]
[tab=一列]
在此填写你的文本，在此填写你的文本，在此填写你的文本，在此填写你的文本
[/tab]
[tab=二列]
在此填写你的文本，在此填写你的文本，在此填写你的文本，在此填写你的文本
[/tab]
[/tabs]
```
This will create two tabs labeled “一列” and “二列” with the specified content in each tab.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [May 25, 2025, 4:03am UTC](https://meta.discourse.org/t/discourse-bbcode-tabs-plugin/367505/2 "2025-05-25T04:03:57Z")
You can request to enter the @plugin-authors group so that you can post this in the #Customization > Plugin category.
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [May 25, 2025, 5:02am UTC](https://meta.discourse.org/t/discourse-bbcode-tabs-plugin/367505/3 "2025-05-25T05:02:17Z")
This is quite cool. I can definitely see a lot of value added
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [May 25, 2025, 5:03am UTC](https://meta.discourse.org/t/discourse-bbcode-tabs-plugin/367505/4 "2025-05-25T05:03:47Z")
> [@cuo\_wu](#):
>
> `https://github.com/discourse/discourse-bbcode-tabs`
Not
[https://github.com/nodeloc/discourse-bbcode-tabs](https://github.com/nodeloc/discourse-bbcode-tabs)
?
* * *
> [@cuo\_wu](#):
>
> `git clone https://github.com/nodeloc/discourse-bbcode-tabs.git plugins/discourse-bbcode-tabs`
@cuo_wu You don’t need to clone the repo manually. You just need to add it to the app.yml file (also, the command is slightly wrong).
* * *
Nice plugin though! I can see many use cases for this.
---
### Author:  [@cuo\_wu](https://meta.discourse.org/u/cuo_wu)
#### Post date: [May 25, 2025, 5:04am UTC](https://meta.discourse.org/t/discourse-bbcode-tabs-plugin/367505/5 "2025-05-25T05:04:38Z")
> [@NateDhaliwal](#):
>
> n request to enter the plugin-authors group so that you can post this in the #plugin::category category.
My mistake. 😆