• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help tabs not working

koala

koala

™
So... I don't know if I missed something but my tabs aren't working and my brain has stopped functioning. Script coding can be found at the bottom. Please help lmao

theme - world on fire​
 [div class=foundation] [div class=q1][div class=play][/div][/div] [div class=q2][div class=title]
our world is​
on Fire
[/div][/div] [div class=q3][div class=tabs][div class=tab]plot[/div] [div class=tab]information[/div] [div class=tab]roles[/div] [div class=tab]links[/div][/div][/div] [div class=q4] [div class="tabsContent tabsContent01"][div class=bg]plot info[/div][/div] [div class="tabsContent tabsContent02" style="display: none;"][div class=bg]info info[/div][/div] [div class="tabsContent tabsContent03" style="display: none;"][div class=bg]roles info[/div][/div] [div class="tabsContent tabsContent04" style="display: none;"][div class=bg]links info[/div][/div] [/div] [/div] [class=foundation] background: #DADADA; box-shadow: inset 0 0 10px #394c52; min-width: 350px; max-width: 500px; height: 400px; margin: auto; position: relative; [/class] [class=q1] background-image: url(https://thumbs.gfycat.com/WeepyTintedArgusfish-size_restricted.gif); background-size: 100%; width: 30%; height: 30%; float: left; pointer-events: all; [/class] [class=play] color: white; opacity: 0.8; font-size: 70px; text-align: center; cursor: pointer; [/class] [class name=play state=hover] color: white; opacity: 0.4; [/class] [class=q2] background: #11252c; width: 70%; height: 30%; float: right; [/class] [class=title] width: 80%; color: white; white-space: pre-line; line-height: 1.5; font-size: 30px; margin-left: 30px; [/class] [class=q3] background: #394c52; width: 30%; height: 70%; float: left; [/class] [class=tabs] font-size: 11px; line-height: 1; text-align: center; width: 100%; height: 100%; color: white; [/class] [class=tab] background-color: #4c5d63; box-shadow: inset 0 0 10px #11252c; cursor: pointer; display: inline-block; padding: 10px 0px; width: 70%; margin-top: 30px; [/class] [class=q4] height: 65%; width: 65%; float: right; margin-top: 10px; margin-right: 15px; [/class] [class=bg] padding: 5px; text-align: justify; overflow-y: auto; color: #11252c; font-size: 13px; [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} 01) (show tabsContent01) if (eq ${currentTab} 02) (show tabsContent02) if (eq ${currentTab} 03) (show tabsContent03) if (eq ${currentTab} 04) (show tabsContent04) [/script]

Code: 
[size=2][center]theme - [url=https://soundcloud.com/user-642523972/klergy-world-on-fire][color=#394c52]world on fire[/color][/url][/center][/size]
[nobr]
[div class=foundation]
[div class=q1][div class=play][fa]fal fa-play[/fa][/div][/div]

[div class=q2][div class=title][right][font=Raleway]our world is[/font][/right]
[div=font-size: 50px][font=Arizonia]on Fire[/font][/div][/div][/div]

[div class=q3][div class=tabs][font=Raleway][div class=tab]plot[/div] [div class=tab]information[/div] [div class=tab]roles[/div] [div class=tab]links[/div][/font][/div][/div]

[div class=q4]
[div class="tabsContent tabsContent01"][div class=bg][font=Raleway]plot info[/font][/div][/div]
[div class="tabsContent tabsContent02" style="display: none;"][div class=bg][font=Raleway]info info[/font][/div][/div]
[div class="tabsContent tabsContent03" style="display: none;"][div class=bg][font=Raleway]roles info[/font][/div][/div]
[div class="tabsContent tabsContent04" style="display: none;"][div class=bg][font=Raleway]links info[/font][/div][/div]
[/div]
[/div]


[class=foundation]
background: #DADADA;
box-shadow: inset 0 0 10px #394c52;
min-width: 350px;
max-width: 500px;
height: 400px;
margin: auto;
position: relative;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q1]
background-image: url(https://thumbs.gfycat.com/WeepyTintedArgusfish-size_restricted.gif);
background-size: 100%;
width: 30%;
height: 30%;
float: left;
pointer-events: all;
[/class]

[class=play]
color: white;
opacity: 0.8;
font-size: 70px;
text-align: center;
cursor: pointer;
[/class]

[class name=play state=hover]
color: white;
opacity: 0.4;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q2]
background: #11252c;
width: 70%;
height: 30%;
float: right;
[/class]

[class=title]
width: 80%;
color: white;
white-space: pre-line;
line-height: 1.5;
font-size: 30px;
margin-left: 30px;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q3]
background: #394c52;
width: 30%;
height: 70%;
float: left;
[/class]

[class=tabs]
font-size: 11px;
line-height: 1;
text-align: center;
width: 100%;
height: 100%;
color: white;
[/class]

[class=tab]
background-color: #4c5d63;
box-shadow: inset 0 0 10px #11252c;
cursor: pointer;
display: inline-block; padding: 10px 0px;
width: 70%;
margin-top: 30px;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q4]
height: 65%;
width: 65%;
float: right;
margin-top: 10px;
margin-right: 15px;
[/class]

[class=bg]
padding: 5px;
text-align: justify;
overflow-y: auto;
color: #11252c;
font-size: 13px;
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} 01) (show tabsContent01)
if (eq ${currentTab} 02) (show tabsContent02)
if (eq ${currentTab} 03) (show tabsContent03)
if (eq ${currentTab} 04) (show tabsContent04)
[/script]

[/nobr]
 
So the issue was you didn't have a script designed to link each tab to its contents. I reworked it with the amazing freebie custom tag code created by fluticasone fluticasone and that should do the trick. Nice design, btw ^^
Code: 
[size=2][center]theme - [url=https://soundcloud.com/user-642523972/klergy-world-on-fire][color=#394c52]world on fire[/color][/url][/center][/size]
[nobr]
[div class=foundation]
[div class=q1][div class=play][fa]fal fa-play[/fa][/div][/div]

[div class=q2][div class=title][right][font=Raleway]our world is[/font][/right]
[div=font-size: 50px][font=Arizonia]on Fire[/font][/div][/div][/div]

[div class=q3][div class=tabs][font=Raleway][div class=tab][div=display: none;]one#[/div]plot[/div] [div class=tab][div=display: none;]two#[/div]information[/div] [div class=tab][div=display: none;]three#[/div]roles[/div] [div class=tab][div=display: none;]four#[/div]links[/div][/font][/div][/div]

[div class=q4]
[div class="tabsContent onetab"][div class=bg][font=Raleway]plot info[/font][/div][/div]
[div class="tabsContent twotab"][div class=bg][font=Raleway]info info[/font][/div][/div]
[div class="tabsContent threetab"][div class=bg][font=Raleway]roles info[/font][/div][/div]
[div class="tabsContent fourtab"][div class=bg][font=Raleway]links info[/font][/div][/div]
[/div]
[/div]

[class=foundation]
background: #DADADA;
box-shadow: inset 0 0 10px #394c52;
min-width: 350px;
max-width: 500px;
height: 400px;
margin: auto;
position: relative;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q1]
background-image: url(https://thumbs.gfycat.com/WeepyTintedArgusfish-size_restricted.gif);
background-size: 100%;
width: 30%;
height: 30%;
float: left;
pointer-events: all;
[/class]

[class=play]
color: white;
opacity: 0.8;
font-size: 70px;
text-align: center;
cursor: pointer;
[/class]

[class name=play state=hover]
color: white;
opacity: 0.4;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q2]
background: #11252c;
width: 70%;
height: 30%;
float: right;
[/class]

[class=title]
width: 80%;
color: white;
white-space: pre-line;
line-height: 1.5;
font-size: 30px;
margin-left: 30px;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q3]
background: #394c52;
width: 30%;
height: 70%;
float: left;
[/class]

[class=tabs]
font-size: 11px;
line-height: 1;
text-align: center;
width: 100%;
height: 100%;
color: white;
[/class]

[class=tab]
background-color: #4c5d63;
box-shadow: inset 0 0 10px #11252c;
cursor: pointer;
display: inline-block; padding: 10px 0px;
width: 70%;
margin-top: 30px;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q4]
height: 65%;
width: 65%;
float: right;
margin-top: 10px;
margin-right: 15px;
[/class]

[class=bg]
padding: 5px;
text-align: justify;
overflow-y: auto;
color: #11252c;
font-size: 13px;
[/class]

[script class=tab version=2]
(hide "tabsContent")
[/script]

[script class=tab version=2 on=click]
(= currenttab (index (split (getText) "#") 0 ))
(hide "tabsContent")
(show (+ currenttab "tab"))
[/script]

[comment]tab script by plastic flower[/comment]

[/nobr]
​
 
Ayama said:
So the issue was you didn't have a script designed to link each tab to its contents. I reworked it with the amazing freebie custom tag code created by fluticasone fluticasone and that should do the trick. Nice design, btw ^^
Code: 
[size=2][center]theme - [url=https://soundcloud.com/user-642523972/klergy-world-on-fire][color=#394c52]world on fire[/color][/url][/center][/size]
[nobr]
[div class=foundation]
[div class=q1][div class=play][fa]fal fa-play[/fa][/div][/div]

[div class=q2][div class=title][right][font=Raleway]our world is[/font][/right]
[div=font-size: 50px][font=Arizonia]on Fire[/font][/div][/div][/div]

[div class=q3][div class=tabs][font=Raleway][div class=tab][div=display: none;]one#[/div]plot[/div] [div class=tab][div=display: none;]two#[/div]information[/div] [div class=tab][div=display: none;]three#[/div]roles[/div] [div class=tab][div=display: none;]four#[/div]links[/div][/font][/div][/div]

[div class=q4]
[div class="tabsContent onetab"][div class=bg][font=Raleway]plot info[/font][/div][/div]
[div class="tabsContent twotab"][div class=bg][font=Raleway]info info[/font][/div][/div]
[div class="tabsContent threetab"][div class=bg][font=Raleway]roles info[/font][/div][/div]
[div class="tabsContent fourtab"][div class=bg][font=Raleway]links info[/font][/div][/div]
[/div]
[/div]

[class=foundation]
background: #DADADA;
box-shadow: inset 0 0 10px #394c52;
min-width: 350px;
max-width: 500px;
height: 400px;
margin: auto;
position: relative;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q1]
background-image: url(https://thumbs.gfycat.com/WeepyTintedArgusfish-size_restricted.gif);
background-size: 100%;
width: 30%;
height: 30%;
float: left;
pointer-events: all;
[/class]

[class=play]
color: white;
opacity: 0.8;
font-size: 70px;
text-align: center;
cursor: pointer;
[/class]

[class name=play state=hover]
color: white;
opacity: 0.4;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q2]
background: #11252c;
width: 70%;
height: 30%;
float: right;
[/class]

[class=title]
width: 80%;
color: white;
white-space: pre-line;
line-height: 1.5;
font-size: 30px;
margin-left: 30px;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q3]
background: #394c52;
width: 30%;
height: 70%;
float: left;
[/class]

[class=tabs]
font-size: 11px;
line-height: 1;
text-align: center;
width: 100%;
height: 100%;
color: white;
[/class]

[class=tab]
background-color: #4c5d63;
box-shadow: inset 0 0 10px #11252c;
cursor: pointer;
display: inline-block; padding: 10px 0px;
width: 70%;
margin-top: 30px;
[/class]
[comment]---------------------------------------------------------[/comment]

[class=q4]
height: 65%;
width: 65%;
float: right;
margin-top: 10px;
margin-right: 15px;
[/class]

[class=bg]
padding: 5px;
text-align: justify;
overflow-y: auto;
color: #11252c;
font-size: 13px;
[/class]

[script class=tab version=2]
(hide "tabsContent")
[/script]

[script class=tab version=2 on=click]
(= currenttab (index (split (getText) "#") 0 ))
(hide "tabsContent")
(show (+ currenttab "tab"))
[/script]

[comment]tab script by plastic flower[/comment]

[/nobr]
​
Click to expand...
Yeah, I have multiple ways of coding tabs. I was just trying to figure out why this one wasn’t working haha. And thank you!!
 
You could've kept it as is and just written a longer script to assign each tab's contents to its relevant tab, but what I love about this one is the fact that it makes everything short and condensed instead of having an extensive script, which I find quite elegant ^^
​
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

JCKane
Help Tabs messing up due to too much text?
Replies
12
Views
93
JCKane
JCKane
Alteras
Resource Text Templater — a plain text template to form field generator
Replies
3
Views
217
A Murder Of Corviknight
A Murder Of Corviknight
Back
Top