[Request] Tabs in Post Content

[Kylin]

I tried to create my own MyCode with this but had little luck. Basically, the premise is to create tabbed content inside a post.

An example from another forum software is here: http://phpbbandbbcodes.com/viewtopic.php?f=11&t=582 . This is what I tried to modify to work with MyBB with no real luck. Though I'd honestly prefer a cleaner look such as the Wordpress plugin here: http://post-tabs.hacklab.com.br/ (scroll toward the middle for the demo).

Basically, I'm just trying to replicate what I have on my current forum on phpbb prior to our community's transfer: http://ffxiv-roleplayers.com/forum/viewt...f=8&t=3130

If anyone has any ideas on how to accomplish this, I'd appreciate it

[Leefish]

You could have a look at how RateU achieved this using XThreads :

http://mybbhacks.zingaburga.com/showthread.php?tid=518

[Destroy666]

Add CSS to global.css, then change {TEXT} to (.*?) in regular expression and to $1, $2 etc. in replacement.
So first MyCode would be:
Regex:

\[tabs\](.*?)\[/tabs\]

Replacement:

<div style="max-width:95%;margin:2px auto;">
<div style="border:2px solid #191970;padding:5px;">&nbsp;</div>
$1
<span class="tab-menu" style="float:right;" onclick="this.parentNode.getElementsByTagName('div')[0].innerHTML='&nbsp;';">X</span>
</div>

[Kylin]

Yeah, that's what I tried at first with the first MyCode and managed to get partial success. It's the second MyCode I had issues with. I mostly didn't know what to replace {INTTEXT} with.

As for the Xthreads, thanks for the suggestion. I've seen XThreads mentioned a lot all over the place but I'm still not 100% sure what it really is even after glancing over it. It's probably something I'll look into after the basics of the site are out of the way though

[Destroy666]

{INTTEXT} are only numbers if I'm not mistaken, so ([0-9]+) or without + if only 1 number.

[SunDi3yansyah]

I was confused in the sense of what it must be added in my MyBB

[SinhLe]

MyCode tabs for MyBB

1. Go to: AdminCP >> Templates >> Your Templates >> Ungrouped Templates >> headerinclude

and Add the following code just after that:

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/tabs_js/tabber.js"></script>
<link rel="stylesheet" href="{$mybb->settings['bburl']}/jscripts/tabs_js/tabber.css" type="text/css" media="screen">

<script type="text/javascript">
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>

Save Template.

2. Now go to: AdminCP >> Configuration >> MyCode >> Add New MyCode

and Add 2 MyCode Tabs and Tab:

2.1 Tabs:

Title *: tabs
Short Description: MyCode tabs for MyBB
Regular Expression *:

\[tabs\](.*?)\[/tabs\]

Replacement *:

<div class="tabber">$1</div>

Enabled? *: Yes
Save MyCode.

2.2 Tab:

Title *: tab
Short Description: MyCode tabs for MyBB
Regular Expression *:

\[tab=(.*?)\](.*?)\[/tab\]

Replacement *:

<div class="tabbertab">
  <h2>$1</h2>
  <p>$2</p>
</div>

Enabled? *: Yes

Save MyCode.

3. Download file Attachment, unzip and upload folder tabs_js to jscripts
4. Test

---

Ex:
[tabs][tab=Title for tab 1]
Content for tab 1
[/tab]
[tab=Title for tab 2]
Content for tab 2
@};-
[/tab]
[/tabs]

[.m.]

^ good work @SinhLe.

[SunDi3yansyah]

@SinhLe : you better make their own yarn to the tutorial you are #cool

few of my questions
how to add TAB 3 and so on?

---

I see no file tabber-min.js whether I let the file it?

---

does not work
please help me

[SinhLe]

@SinhLe : you better make their own yarn to the tutorial you are #cool

few of my questions
how to add TAB 3 and so on?

---

I see no file tabber-min.js whether I let the file it?

---

does not work
please help me

Ex with code:

[tabs][tab=Title for tab 1]
Content for tab 1
[/tab]
[tab=Title for tab 2]
Content for tab 2
@};-
[/tab]
[tab=Title for tab 3]
Content for tab 3
@};-
[/tab]
[tab=Title for tab 4]
Content for tab 4
@};-
[/tab]
[/tabs]

Screenshot: