Help tabs (and how not to screw up)

[ewolf20]

since the new bb+ can do tabs, what are the steps needed to make one in divs or just plain text? (sorry for the noob question i just want to add some fancy tabs to my code)

 

[Alteras]

What exactly do you need help with? the divs or the logic for the bbscript?

 

[ewolf20]

What exactly do you need help with? the divs or the logic for the bbscript?

Bbscript

 

[Alteras]

Are you using add/remove Class to achieve your tabs or fadeIn/Out or hide/show.

Hide and show would be the easiest to do.

 

[ewolf20]

Are you using add/remove Class to achieve your tabs or fadeIn/Out or hide/show.

Hide and show would be the easiest to do.

if that's the case, hide and show. with these:

Spoiler: code

[nobr][class name=div1]
background-color: #0051a3;
width:40px;
transition: width 0.5s,background 0.5s,height 0.5s;
padding: 10px;
border-radius:80px;
height: 15px
[/class]
[class name=div1 state=hover]
    background-color:#007fff ;
width: 50px;
padding: 10px;border-radius:80px; height: 20px
[/class]
[/nobr]
[div class=div1][center][fa]fas fa-info[/fa][/center]
[/div]
[div class=div1][center][fa]fas fa-info[/fa][/center]
[/div]
[div class=div1][center][fa]fas fa-info[/fa][/center]
[/div]

 

[Alteras]

For the bbcode to work, you must have some way to differentiate the different tabs link them to their respective tab contents. This can either be done by giving each tab and tab content a second unique class like so: class="div1 infotab"

While this is a requirement for the tab content, the tab itself doesn't have to use this, but can instead just have text inside the div itself that determines its identity such as:
[div class=div1][center][fa]fas fa-info[/fa]INFO[/center][/div]

the key part here is the INFO text because getText is unable to get fa-icons.

 

[ewolf20]

For the bbcode to work, you must have some way to differentiate the different tabs link them to their respective tab contents. This can either be done by giving each tab and tab content a second unique class like so: class="div1 infotab"

While this is a requirement for the tab content, the tab itself doesn't have to use this, but can instead just have text inside the div itself that determines its identity such as:
[div class=div1][center][fa]fas fa-info[/fa]INFO[/center][/div]

the key part here is the INFO text because getText is unable to get fa-icons.

i'm trying to do but it seems to look wonk

Spoiler: code

[nobr]
[class name=div1]
background-color:darkgrey
[/class]
[class name=tabsContent1]
float: right;
background-color: grey;
width:300px;
height: 200px;
[/class]
[class name=tabsContent2]
float: right;
background-color: grey;
width:300px;
height: 200px;
[/class]
[class name=tabsContent3]
float: right;
background-color: grey;
width:300px;
height: 200px;
[/class]
[class name=tab1]
background-color: #0051a3;
width: 40px;
transition: width 0.5s,background 0.5s,height 0.5s;
padding: 10px;
border-radius: 80px;
height: 15px
[/class]
[class name=tab1 state=hover]
    background-color:#007fff ;
width: 50px;
padding: 10px;border-radius:80px; height: 20px
[/class]
[class=tab]
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        padding: 10px 0;
        width: 33%;
    [/class]
[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} 1) (show tabsContent1)
if (eq ${currentTab} 2) (show tabsContent2)
if (eq ${currentTab} 3) (show tabsContent3)
[/script]
[script=tab]
hide tabsContent
show tabsContent1
[/script]

[/nobr]
[div class=div1]
[div class=tab][div class=tab1]1[/div][/div]
[div class=tab][div class=tab1]2[/div][/div]
[div class=tab][div class=tab1]3[/div][/div]
[div class="tabsContent1"]
Our induced ear machines any rabbit across the irate cloth. Her woods acceptance fellows its boiling expressway. The lethal basis changes the tune near an organized debugger. An alcoholic attends![/div]
[div class=tabsContent2]
The unavoidable flame witnesses the maintained accountant. A light composes opposite the leg. Will a spur stare around a childish snag? The crunch intervenes?[/div]
[div class=tabsContent3]
Outside the pet breeze rockets an economical classic. Should the obstruction team the vehicle? Does a specialist turn past the bananas onion? A fountain ignores an arguing dispute. The downright tolerates each bow challenge. How can a mate bark?[/div]
[/div]

 

[Alteras]

use this for the divs and make the others similar to it.
[div class="tabsContent tabsContent1"]

This will make the div both tabsContent and tabsContent1

 

[ewolf20]

use this for the divs and make the others similar to it.
[div class="tabsContent tabsContent1"]

This will make the div both tabsContent and tabsContent1

i'm going to be honest i did not understand that. sorry.

 

[Alteras]

So instead of:
[div class="tabsContent1"]...[/div]
[div class="tabsContent2"]...[/div]
[div class="tabsContent3"]...[/div]

You'd have:
[div class="tabsContent tabsContent1"]...[/div]
[div class="tabsContent tabsContent2"]...[/div]
[div class="tabsContent tabsContent3"]...[/div]

This gives our divs a second class. There is a wonderful guide explaining this here: Tutorial - A Beginner's Guide To Classes

For our purposes, this means that when we do "hide tabsContent" in our bbscript, all of the divs with the class "tabsContent" gets hidden.

 

[ewolf20]

wait, now got it working, just need to fix positioning.

Spoiler: code

[nobr]

[class name=div1]

background-color:darkgrey

[/class]

[class name=tabsContent1]

float: right;

background-color: grey;

width:300px;

height: 200px;

[/class]

[class name=tabsContent2]

float: right;

background-color: grey;

width:300px;

height: 200px;

[/class]

[class name=tabsContent3]

float: right;

background-color: grey;

width:300px;

height: 200px;

[/class]

[class name=tab1]

background-color: #0051a3;

width: 40px;

transition: width 0.5s,background 0.5s,height 0.5s;

padding: 10px;

border-radius: 80px;

height: 15px

[/class]

[class name=tab1 state=hover]

    background-color:#007fff ;

width: 50px;

padding: 10px;border-radius:80px; height: 20px

[/class]

[class=tab]

        box-sizing: border-box;

        cursor: pointer;

        display: inline-block;

        padding: 10px 0;

        width: 33%;

    [/class]

[script class=tab on=click]

hide tabsContent

set currentTab (getText)

if (eq ${currentTab} pup) (show tabsContent1)

if (eq ${currentTab} kit) (show tabsContent2)

if (eq ${currentTab} cub) (show tabsContent3)

[/script]

[script=tab]

hide tabsContent

show tabsContent1

[/script]

[/nobr]



[div class=div1]

[div class=tab][div class=tab1]pup[/div][/div]

[div class=tab][div class=tab1]kit[/div][/div]

[div class=tab][div class=tab1]cub[/div][/div]

[div class="tabsContent tabsContent1"]Our induced ear machines any rabbit across the irate cloth. Her woods acceptance fellows its boiling expressway. The lethal basis changes the tune near an organized debugger. An alcoholic attends![/div][div class="tabsContent tabsContent2"]The unavoidable flame witnesses the maintained accountant. A light composes opposite the leg. Will a spur stare around a childish snag? The crunch intervenes?[/div][div class="tabsContent tabsContent3"]Outside the pet breeze rockets an economical classic. Should the obstruction team the vehicle? Does a specialist turn past the bananas onion? A fountain ignores an arguing dispute. The downright tolerates each bow challenge. How can a mate bark?[/div]

[/div]