Hi, I've been looking around for forum hosting. I cannot find this topic anywhere. A search for "tabs" returns nothing about my question.

Does forumotion support the [tabs][tab][/tab][/tabs] tags? If not, is there a way to make it so (with scripts or something else)?

Thank you for reading.

i dont think its supported here seeing as you typed the code and nothing happen .. so can you provide a screen shot or an example of what this code is suppose to do?

Ηello,

It's the first time i've heard of these tabs. What are those and what do they do?

Here is a screenshot from another bbcode forum. It's code is kind of like a table and very simple. It's just a way of organizing text and other elements. The below image example would be:

[tabs]
[tab=Description]Text not shown[/tab]
[tab=Culture]Humans tend to be more self-interested that other...[/tab]
[tab=Relations]Text not shown[/tab]
[tab=Human Clans]Text not shown[/tab]
[/tabs]

Edit: Thanks for taking a look

Hello,

Interesting code. This is not supported on Forumotion indeed. I don't know because this code gives me worries. For example if i want to add a new row split in half i would use the "td" tags and will be fine. How would i do that with the tab tags?

Luffy

i have this figured out already jus abt watch a movie then ill finish it up and post it for u

It exactly looks like HTML, notBBBCode.

The [tab] is used to indent 5 spaces.  An example would be the indention of the first sentence of a paragraph.

[Tab]This is how it would appear in the text editor.  Notice there is no closing tab.  I got this information from a Google search.

alright this what i came up with


acp>display>colors>css

add the code below and save

Code:


/*------------lc tabbed system---------*/
.tabs input[type=radio] {position: absolute;left: -9999px;}

.tabs li{float: left;color:transparent;}

.tabs label {display: block;padding: 3px 10px;border-radius: 10px 10px 0 0;border:1px solid black;
color: #000;font-size: 12px;font-weight: bold;background: rgba(255,255,255,0.5);cursor: pointer;
position: relative;top: 0px;-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}

.tabs label:hover {background: rgba(255,255,255,0.7);top: 0;}
     
[id^=tab]:checked + label {background: #08C;color: #000;top: 0;}
     
[id^=tab]:checked ~ [id^=tab-content] {display: block;}

.tabs {padding: 0px;width: 100%;display: block;float: none;height: 300px;list-style: outside none none;position: relative;}

.tab-content {animation-duration: 0.5s;position: absolute;z-index: 999;display: none;
text-align: left;overflow: auto;background: none repeat scroll 0% 0% rgba(255,255,255,0.5);
padding: 15px;color: #000;left: 0px;width: 90% !important;height:auto;box-sizing: border-box;}
/*----------end of tabbed system--------------*/


then goto

acp>modules>javascrpt>
make sure javascript managment is turned on if not turn it on and save

then create a new script

title:dont matter
placment: in topics

copy and paste code below and save

Code:


$(function(){
$('.postbody .content').each(function(){
      var oldhtml = "";
  oldhtml = $(this).html();
  oldhtml=oldhtml.replace(/\[tabs\]/g,'<ul class="tabs">').replace(/\[\/tabs\]/ig,'</ul>').replace(/\[tab=(.*?)\](.*?)\[\/tab\]/ig,'<li><input type="radio" name="tabs"><label for="tab1">$1</label><div id="tab-content1" class="tab-content animated fadeIn">$2</div></li>');   
  oldhtml=oldhtml.replace(/<\/li><br><li>/ig,'</li><li>');
   $(this).html(oldhtml);
   $(this).find('.tabs label').each(function(index){
      $(this).attr('for','tab'+index);
   });
      $(this).find('.tabs div').each(function(index){
      $(this).attr('id','tab-content'+index);
   });
            $(this).find('.tabs input').each(function(index){
               if(index==0){$(this).attr('checked','checked');}
      $(this).attr('id','tab'+index);
   });
});
});