Help First Time Making Tabs ~ Help Me Out ?

[Satanic Nightjar]

Hey! As you can see, my problem is that when the program first loads, all three tabs are displayed on the first tab, until you actually CLICK on the "about", and then everything functions normally. If anyone could help me solve this I'd be soooo so grateful

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;

[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} about) (show tabsContentabout)
if (eq ${currentTab} preferences) (show tabsContentpreferences)
if (eq ${currentTab} plot) (show tabsContentplot)
[/script]

[div class=tabs][div class=tab]about[/div][div class=tab]preferences[/div][div class=tab]plot[/div][/div]

[div class="tabsContent tabsContentabout" style="margin: auto; width: 600px;box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center;"] text here
[/div]

[div class="tabsContent tabsContentpreferences"
style="margin: auto; width: 600px;box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; margin-top: -45px;"] text here

[/div]

[div class="tabsContent tabsContentplot"
style="margin: auto; width: 600px;box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; margin-top: -90px;"] text here
[/div]

Spoiler: Code

[imageFloat=center][div=margin-left: 35%; width:300px;height:300px; border: 5px solid; background:url('https://pbs.twimg.com/media/Dw9_U7UVsAAEkpP.jpg');background-size:110%; border-radius: 500px; text-align: center; margin-bottom: -150px][/div] [/imageFloat] [class=tabs] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); border-radius: 1000px; box-shadow: 0px 0px 15px black; color: black; font-size: 18px; font-weight: bold; min-width: 350px; text-align: center; width: 50%; margin: auto; [/class] [class=tab] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class name=tab state=hover] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} about) (show tabsContentabout) if (eq ${currentTab} preferences) (show tabsContentpreferences) if (eq ${currentTab} plot) (show tabsContentplot) [/script] [div class=tabs][div class=tab]about[/div][div class=tab]preferences[/div][div class=tab]plot[/div][/div] [div class="tabsContent tabsContentabout" style="margin: auto; width: 600px;box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center;"] text here [/div] [div class="tabsContent tabsContentpreferences" style="margin: auto; width: 600px;box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; margin-top: -45px;"] text here :) [/div] [div class="tabsContent tabsContentplot" style="margin: auto; width: 600px;box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; margin-top: -90px;"] text here [/div]

 

[Satanic Nightjar]

• Tab A
• Tab B

• 
  It works by placing all context between the (tab=____) & (/tab)
  
• 
  Place all code between the two and close the things (font=cambria) (/font) in the same section.
  

*Confused*

 

[Satanic Nightjar]

(tabs)
(Tab=Tab A)
(/tab)
(Tab=Tab B)
(/tab)
(/tabs)
That’s how it should be with proper text inbetween.

I understand how to use that kind of tab, but I'm trying to customize them using script, if you look at the code ~ thanks though xD

 

[blackout]

hey there satanic! i really love your code, by the way. while that is a legitimate way to execute tabs, there's another that i find much easier, so i'll be using that one here. first off, we're going to nix the script you currently have and instead of having defined subclass names (e.g. "tabsContent tabsContentplot") simply copy-paste the actual class for "tabsContent" and rename it to recreate this effect. forming a class for them is easy: we'll just take the content you have defined in each "style" tag and transfer that into class format. this will make no visual shift in the code, except for negating the tab's functionality:

Spoiler: v1

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;

[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabsContentabout]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class=tabsContentpreferences]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class=tabsContentplot]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]


[div class=tabs][div class=tab]about[/div][div class=tab]preferences[/div][div class=tab]plot[/div][/div]

[div class=tabsContentabout] text here
[/div]

[div class=tabsContentpreferences] text here

[/div]

[div class=tabsContentplot] text here
[/div]

Spoiler: code v1

[imageFloat=center][div=margin-left: 35%; width:300px;height:300px; border: 5px solid; background:url('https://pbs.twimg.com/media/Dw9_U7UVsAAEkpP.jpg');background-size:110%; border-radius: 500px; text-align: center; margin-bottom: -150px][/div] [/imageFloat]

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;

[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabsContentabout]
margin: auto; 
width: 600px;
box-shadow: 0px 0px 20px black; 
border-radius: 20px; 
font-size: 12px; 
height: 150px; 
overflow: scroll; 
padding: 20px; 
text-align: center;
[/class]

[class=tabsContentpreferences]
margin: auto; 
width: 600px;
box-shadow: 0px 0px 20px black; 
border-radius: 20px; 
font-size: 12px; 
height: 150px; 
overflow: scroll; 
padding: 20px; 
text-align: center;
[/class]

[class=tabsContentplot]
margin: auto; 
width: 600px;
box-shadow: 0px 0px 20px black; 
border-radius: 20px; 
font-size: 12px; 
height: 150px; 
overflow: scroll; 
padding: 20px; 
text-align: center;
[/class]

[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]


[div class=tabs][div class=tab]about[/div][div class=tab]preferences[/div][div class=tab]plot[/div][/div]

[div class=tabsContentabout] text here
[/div]

[div class=tabsContentpreferences] text here :)

[/div]

[div class=tabsContentplot] text here
[/div]

now, we'll start with the new script that tells the tabs to function! the two important things to pay attention to here are the "hidden" class and of course, the actual script. the "hidden" class simply tells a class to not appear, which the script class then works to undo on a click. the function "fadeIn 0500" tells it to fade the class in at the speed of 0500 ( you can make this slower by increasing the second digit or faster by decreasing it ) and the function "hide" tells the content of the classes we don't want to see to not display themselves. now, that's also what the "hidden" class does, but by telling the code to apply it to all undesired tabs makes sure that any tab that is open gets closed.

in addition to making all of the content classes individualized, we'll also need to do this for the tabs. again, they'll be identical, just renamed with numbers ( e.g. tab1, tab2, tab3 ) so that the script knows which tab it's looking at. using this format of script is, in my opinion, much easier to understand ( and just generally more used ), but it does require a separate script for each button. i also added a handy little tag called "nobr". it wraps around the whole code and negates any line breaks ( hence the name: an abbreviation of 'no breaks'. ) so that your code doesn't have all that white space! with this, you need to use the "br" tag and its respective "/br" to insert spaces when you want them. i went ahead and added some positioning elements too, so your code wont't be smushed either. to make things easier with it, i moved the main "imageFloat" at the front to the head of the div classes. now, this is the final product!

Spoiler: v2!

[class=tabs] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); border-radius: 1000px; box-shadow: 0px 0px 15px black; color: black; font-size: 18px; font-weight: bold; min-width: 350px; text-align: center; width: 50%; margin: auto; position: relative; top: 170px; [/class] [class=tab1] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tab2] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tab3] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tabsContentabout] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=tabsContentpreferences] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=tabsContentplot] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=hidden] display: none; [/class] [script class=tab1 on=click] show tabsContentabout hide tabsContentpreferences hide tabsContentplot [/script] [script class=tab2 on=click] show tabsContentpreferences hide tabsContentabout hide tabsContentplot [/script] [script class=tab3 on=click] show tabsContentplot hide tabsContentpreferences hide tabsContentabout [/script] [class name=tab state=hover] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); [/class]

[div class=tabs][div class=tab1]about[/div][div class=tab2]preferences[/div][div class=tab3]plot[/div][/div] [div class=tabsContentabout] text here [/div] [div class="tabsContentpreferences hidden"] text here [/div] [div class="tabsContentplot hidden"] text here [/div]

Spoiler: v2 code!

[nobr]

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;
position: relative;
top: 170px;
[/class]

[class=tab1]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tab2]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tab3]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabsContentabout]
margin: auto; 
width: 600px;
box-shadow: 0px 0px 20px black; 
border-radius: 20px; 
font-size: 12px; 
height: 150px; 
overflow: scroll; 
padding: 20px; 
text-align: center;
position: relative;
top: 200px;
[/class]

[class=tabsContentpreferences]
margin: auto; 
width: 600px;
box-shadow: 0px 0px 20px black; 
border-radius: 20px; 
font-size: 12px; 
height: 150px; 
overflow: scroll; 
padding: 20px; 
text-align: center;
position: relative;
top: 200px;
[/class]

[class=tabsContentplot]
margin: auto; 
width: 600px;
box-shadow: 0px 0px 20px black; 
border-radius: 20px; 
font-size: 12px; 
height: 150px; 
overflow: scroll; 
padding: 20px; 
text-align: center;
position: relative;
top: 200px;
[/class]

[class=hidden]
display: none;
[/class]

[script class=tab1 on=click]
show tabsContentabout
hide tabsContentpreferences
hide tabsContentplot
[/script]

[script class=tab2 on=click]
show tabsContentpreferences
hide tabsContentabout
hide tabsContentplot
[/script]

[script class=tab3 on=click]
show tabsContentplot 
hide tabsContentpreferences
hide tabsContentabout
[/script]
 
[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]

[imageFloat=center][div=margin-left: 38%; width:300px;height:300px; border: 5px solid; background:url('https://pbs.twimg.com/media/Dw9_U7UVsAAEkpP.jpg');background-size:110%; border-radius: 500px; text-align: center; margin-bottom: -150px][/div] [/imageFloat]

[div class=tabs][div class=tab1]about[/div][div class=tab2]preferences[/div][div class=tab3]plot[/div][/div]

[div class=tabsContentabout] text here
[/div]

[div class="tabsContentpreferences hidden"] text here :)

[/div]

[div class="tabsContentplot hidden"] text here
[/div]
[/nobr]

 

[Satanic Nightjar]

hey there satanic! i really love your code, by the way. while that is a legitimate way to execute tabs, there's another that i find much easier, so i'll be using that one here. first off, we're going to nix the script you currently have and instead of having defined subclass names (e.g. "tabsContent tabsContentplot") simply copy-paste the actual class for "tabsContent" and rename it to recreate this effect. forming a class for them is easy: we'll just take the content you have defined in each "style" tag and transfer that into class format. this will make no visual shift in the code, except for negating the tab's functionality:

Spoiler: v1

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;

[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabsContentabout]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class=tabsContentpreferences]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class=tabsContentplot]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]


[div class=tabs][div class=tab]about[/div][div class=tab]preferences[/div][div class=tab]plot[/div][/div]

[div class=tabsContentabout] text here
[/div]

[div class=tabsContentpreferences] text here

[/div]

[div class=tabsContentplot] text here
[/div]

Spoiler: code v1

[imageFloat=center][div=margin-left: 35%; width:300px;height:300px; border: 5px solid; background:url('https://pbs.twimg.com/media/Dw9_U7UVsAAEkpP.jpg');background-size:110%; border-radius: 500px; text-align: center; margin-bottom: -150px][/div] [/imageFloat]

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;

[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabsContentabout]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class=tabsContentpreferences]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class=tabsContentplot]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]


[div class=tabs][div class=tab]about[/div][div class=tab]preferences[/div][div class=tab]plot[/div][/div]

[div class=tabsContentabout] text here
[/div]

[div class=tabsContentpreferences] text here :)

[/div]

[div class=tabsContentplot] text here
[/div]

now, we'll start with the new script that tells the tabs to function! the two important things to pay attention to here are the "hidden" class and of course, the actual script. the "hidden" class simply tells a class to not appear, which the script class then works to undo on a click. the function "fadeIn 0500" tells it to fade the class in at the speed of 0500 ( you can make this slower by increasing the second digit or faster by decreasing it ) and the function "hide" tells the content of the classes we don't want to see to not display themselves. now, that's also what the "hidden" class does, but by telling the code to apply it to all undesired tabs makes sure that any tab that is open gets closed.

in addition to making all of the content classes individualized, we'll also need to do this for the tabs. again, they'll be identical, just renamed with numbers ( e.g. tab1, tab2, tab3 ) so that the script knows which tab it's looking at. using this format of script is, in my opinion, much easier to understand ( and just generally more used ), but it does require a separate script for each button. i also added a handy little tag called "nobr". it wraps around the whole code and negates any line breaks ( hence the name: an abbreviation of 'no breaks'. ) so that your code doesn't have all that white space! with this, you need to use the "br" tag and its respective "/br" to insert spaces when you want them. i went ahead and added some positioning elements too, so your code wont't be smushed either. to make things easier with it, i moved the main "imageFloat" at the front to the head of the div classes. now, this is the final product!

Spoiler: v2!

[class=tabs] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); border-radius: 1000px; box-shadow: 0px 0px 15px black; color: black; font-size: 18px; font-weight: bold; min-width: 350px; text-align: center; width: 50%; margin: auto; position: relative; top: 170px; [/class] [class=tab1] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tab2] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tab3] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tabsContentabout] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=tabsContentpreferences] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=tabsContentplot] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=hidden] display: none; [/class] [script class=tab1 on=click] show tabsContentabout hide tabsContentpreferences hide tabsContentplot [/script] [script class=tab2 on=click] show tabsContentpreferences hide tabsContentabout hide tabsContentplot [/script] [script class=tab3 on=click] show tabsContentplot hide tabsContentpreferences hide tabsContentabout [/script] [class name=tab state=hover] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); [/class]

[div class=tabs][div class=tab1]about[/div][div class=tab2]preferences[/div][div class=tab3]plot[/div][/div] [div class=tabsContentabout] text here [/div] [div class="tabsContentpreferences hidden"] text here [/div] [div class="tabsContentplot hidden"] text here [/div]

Spoiler: v2 code!

[nobr]

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;
position: relative;
top: 170px;
[/class]

[class=tab1]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tab2]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tab3]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabsContentabout]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
position: relative;
top: 200px;
[/class]

[class=tabsContentpreferences]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
position: relative;
top: 200px;
[/class]

[class=tabsContentplot]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
position: relative;
top: 200px;
[/class]

[class=hidden]
display: none;
[/class]

[script class=tab1 on=click]
show tabsContentabout
hide tabsContentpreferences
hide tabsContentplot
[/script]

[script class=tab2 on=click]
show tabsContentpreferences
hide tabsContentabout
hide tabsContentplot
[/script]

[script class=tab3 on=click]
show tabsContentplot
hide tabsContentpreferences
hide tabsContentabout
[/script]

[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]

[imageFloat=center][div=margin-left: 38%; width:300px;height:300px; border: 5px solid; background:url('https://pbs.twimg.com/media/Dw9_U7UVsAAEkpP.jpg');background-size:110%; border-radius: 500px; text-align: center; margin-bottom: -150px][/div] [/imageFloat]

[div class=tabs][div class=tab1]about[/div][div class=tab2]preferences[/div][div class=tab3]plot[/div][/div]

[div class=tabsContentabout] text here
[/div]

[div class="tabsContentpreferences hidden"] text here :)

[/div]

[div class="tabsContentplot hidden"] text here
[/div]
[/nobr]

Ohmygosh thank you!! Both for fixing my code and for taking the time to explain why on earth this wonderful thing works.. I appreciate it a lot (:

 

[blackout]

Ohmygosh thank you!! Both for fixing my code and for taking the time to explain why on earth this wonderful thing works.. I appreciate it a lot (:

no worries, lovely! i'm always here if you need any help.

 

[deer]

eep ! blackout ; bby you beat me to it! your explanation is so on point and i'm in-love with it ! sending all my uwus to you hehee!

i think what's so great about coding is that there's so many different ways to do it! having said that, i ended up fixing your code for you as well if you wanted to write your tabs this way! [ however, note, because this tab isn't as specific as the one fae showed you, there's only so much you can do with it before you'd have to change the coding style to the one above! but, for me personally, when i started out making tabs, i used Lyro's tabs as well! ]

when i was fixing your code, the only "mistake" noticed was that in each tabs, to not show the each tab content, you can add style=display: none; !
other than that, everything was fine and dandy! but, i went ahead and changed your image div and your content div into "classes" and named them "class=image" and "class=tabcontent" !

i think one thing you should note is that at the beginning, you'd have to add [nobr] and at the end, it would be [/nobr] but since there's nobr's to cause a line break in your paragraphs / lines, you'd do [br][/br]! or if you don't want to type that out so many times, in your "class=tabcontent" that i made for you, you can add white-space: pre-wrap; and you won't have to write [br][/br] !

Spoiler: live version

[class=image] width: 300px; height:300px; border: 5px solid; background:url('https://pbs.twimg.com/media/Dw9_U7UVsAAEkpP.jpg'); background-size: cover; border-radius: 100%; margin: auto; margin-bottom: 30px; [/class] [class=tabs] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); border-radius: 1000px; box-shadow: 0px 0px 15px black; color: black; font-size: 18px; font-weight: bold; min-width: 350px; text-align: center; width: 50%; margin: auto; [/class] [class=tab] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tabcontent] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; margin-right: auto; margin-left: auto; margin-top: 45px; margin-bottom: 10px; [/class] [class name=tab state=hover] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); [/class] [script class=tab on=click] hide tabsContent set currentTab (getText) if (eq ${currentTab} about) (show tabsContentabout) if (eq ${currentTab} preferences) (show tabsContentpreferences) if (eq ${currentTab} plot) (show tabsContentplot) [/script] [div class=image][/div] [div class=tabs][div class=tab]about[/div][div class=tab]preferences[/div][div class=tab]plot[/div][/div] [div class="tabsContent tabsContentabout"][div class=tabcontent] text here! [/div][/div] [div class="tabsContent tabsContentpreferences" style="display: none;"][div class=tabcontent] text here [/div][/div] [div class="tabsContent tabsContentplot" style="display: none;"][div class=tabcontent]text here [/div][/div]

Spoiler: code

[nobr]
[class=image]
width: 300px; 
height:300px; 
border: 5px solid; 
background:url('https://pbs.twimg.com/media/Dw9_U7UVsAAEkpP.jpg');
background-size: cover;
border-radius: 100%;
margin: auto;
margin-bottom: 30px;
[/class]

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;
[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabcontent]
margin: auto; 
width: 600px;
box-shadow: 0px 0px 20px black; 
border-radius: 20px; 
font-size: 12px; 
height: 150px; 
overflow: scroll; 
padding: 20px; 
text-align: center; 
margin-right: auto;
margin-left: auto;
margin-top: 45px; 
margin-bottom: 10px;
[/class]

[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]

[script class=tab on=click]
hide tabsContent
set currentTab (getText)
if (eq ${currentTab} about) (show tabsContentabout)
if (eq ${currentTab} preferences) (show tabsContentpreferences)
if (eq ${currentTab} plot) (show tabsContentplot)
[/script]

[div class=image][/div]
[div class=tabs][div class=tab]about[/div][div class=tab]preferences[/div][div class=tab]plot[/div][/div]

[div class="tabsContent tabsContentabout"][div class=tabcontent]  text here!
[/div][/div]

[div class="tabsContent tabsContentpreferences" style="display: none;"][div class=tabcontent] text here :)

[/div][/div]

[div class="tabsContent tabsContentplot" style="display: none;"][div class=tabcontent]text here

[/div][/div][/nobr]

 

[blackout]

cruci sweeping in here being just absolutely AMAZING AAA

 

[Satanic Nightjar]

hey there satanic! i really love your code, by the way. while that is a legitimate way to execute tabs, there's another that i find much easier, so i'll be using that one here. first off, we're going to nix the script you currently have and instead of having defined subclass names (e.g. "tabsContent tabsContentplot") simply copy-paste the actual class for "tabsContent" and rename it to recreate this effect. forming a class for them is easy: we'll just take the content you have defined in each "style" tag and transfer that into class format. this will make no visual shift in the code, except for negating the tab's functionality:

Spoiler: v1

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;

[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabsContentabout]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class=tabsContentpreferences]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class=tabsContentplot]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]


[div class=tabs][div class=tab]about[/div][div class=tab]preferences[/div][div class=tab]plot[/div][/div]

[div class=tabsContentabout] text here
[/div]

[div class=tabsContentpreferences] text here

[/div]

[div class=tabsContentplot] text here
[/div]

Spoiler: code v1

[imageFloat=center][div=margin-left: 35%; width:300px;height:300px; border: 5px solid; background:url('https://pbs.twimg.com/media/Dw9_U7UVsAAEkpP.jpg');background-size:110%; border-radius: 500px; text-align: center; margin-bottom: -150px][/div] [/imageFloat]

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;

[/class]

[class=tab]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabsContentabout]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class=tabsContentpreferences]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class=tabsContentplot]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
[/class]

[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]


[div class=tabs][div class=tab]about[/div][div class=tab]preferences[/div][div class=tab]plot[/div][/div]

[div class=tabsContentabout] text here
[/div]

[div class=tabsContentpreferences] text here :)

[/div]

[div class=tabsContentplot] text here
[/div]

now, we'll start with the new script that tells the tabs to function! the two important things to pay attention to here are the "hidden" class and of course, the actual script. the "hidden" class simply tells a class to not appear, which the script class then works to undo on a click. the function "fadeIn 0500" tells it to fade the class in at the speed of 0500 ( you can make this slower by increasing the second digit or faster by decreasing it ) and the function "hide" tells the content of the classes we don't want to see to not display themselves. now, that's also what the "hidden" class does, but by telling the code to apply it to all undesired tabs makes sure that any tab that is open gets closed.

in addition to making all of the content classes individualized, we'll also need to do this for the tabs. again, they'll be identical, just renamed with numbers ( e.g. tab1, tab2, tab3 ) so that the script knows which tab it's looking at. using this format of script is, in my opinion, much easier to understand ( and just generally more used ), but it does require a separate script for each button. i also added a handy little tag called "nobr". it wraps around the whole code and negates any line breaks ( hence the name: an abbreviation of 'no breaks'. ) so that your code doesn't have all that white space! with this, you need to use the "br" tag and its respective "/br" to insert spaces when you want them. i went ahead and added some positioning elements too, so your code wont't be smushed either. to make things easier with it, i moved the main "imageFloat" at the front to the head of the div classes. now, this is the final product!

Spoiler: v2!

[class=tabs] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); border-radius: 1000px; box-shadow: 0px 0px 15px black; color: black; font-size: 18px; font-weight: bold; min-width: 350px; text-align: center; width: 50%; margin: auto; position: relative; top: 170px; [/class] [class=tab1] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tab2] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tab3] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tabsContentabout] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=tabsContentpreferences] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=tabsContentplot] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=hidden] display: none; [/class] [script class=tab1 on=click] show tabsContentabout hide tabsContentpreferences hide tabsContentplot [/script] [script class=tab2 on=click] show tabsContentpreferences hide tabsContentabout hide tabsContentplot [/script] [script class=tab3 on=click] show tabsContentplot hide tabsContentpreferences hide tabsContentabout [/script] [class name=tab state=hover] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); [/class]

[div class=tabs][div class=tab1]about[/div][div class=tab2]preferences[/div][div class=tab3]plot[/div][/div] [div class=tabsContentabout] text here [/div] [div class="tabsContentpreferences hidden"] text here [/div] [div class="tabsContentplot hidden"] text here [/div]

Spoiler: v2 code!

[nobr]

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;
position: relative;
top: 170px;
[/class]

[class=tab1]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tab2]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tab3]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabsContentabout]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
position: relative;
top: 200px;
[/class]

[class=tabsContentpreferences]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
position: relative;
top: 200px;
[/class]

[class=tabsContentplot]
margin: auto;
width: 600px;
box-shadow: 0px 0px 20px black;
border-radius: 20px;
font-size: 12px;
height: 150px;
overflow: scroll;
padding: 20px;
text-align: center;
position: relative;
top: 200px;
[/class]

[class=hidden]
display: none;
[/class]

[script class=tab1 on=click]
show tabsContentabout
hide tabsContentpreferences
hide tabsContentplot
[/script]

[script class=tab2 on=click]
show tabsContentpreferences
hide tabsContentabout
hide tabsContentplot
[/script]

[script class=tab3 on=click]
show tabsContentplot
hide tabsContentpreferences
hide tabsContentabout
[/script]

[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]

[imageFloat=center][div=margin-left: 38%; width:300px;height:300px; border: 5px solid; background:url('https://pbs.twimg.com/media/Dw9_U7UVsAAEkpP.jpg');background-size:110%; border-radius: 500px; text-align: center; margin-bottom: -150px][/div] [/imageFloat]

[div class=tabs][div class=tab1]about[/div][div class=tab2]preferences[/div][div class=tab3]plot[/div][/div]

[div class=tabsContentabout] text here
[/div]

[div class="tabsContentpreferences hidden"] text here :)

[/div]

[div class="tabsContentplot hidden"] text here
[/div]
[/nobr]

one quick thing ~ i copied your code into my PW so i could look at it closer, but when i tested it (without changing anything) the text box was completely invisible. you can try it yourself, it's really weird. i can't seem to figure out why though, because everything else is perfectly fine.

 

[blackout]

one quick thing ~ i copied your code into my PW so i could look at it closer, but when i tested it (without changing anything) the text box was completely invisible. you can try it yourself, it's really weird. i can't seem to figure out why though, because everything else is perfectly fine.

hey, sorry for that! i'm quite sure why it does that, but it's an easy fix. i just wrapped a div with a defined height variable around the whole thing.

Spoiler: live

[class=tabs] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); border-radius: 1000px; box-shadow: 0px 0px 15px black; color: black; font-size: 18px; font-weight: bold; min-width: 350px; text-align: center; width: 50%; margin: auto; position: relative; top: 170px; [/class] [class=tab1] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tab2] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tab3] box-sizing: border-box; cursor: pointer; display: inline-block; padding: 10px 0; width: 33%; border-radius: 50px; [/class] [class=tabsContentabout] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=tabsContentpreferences] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=tabsContentplot] margin: auto; width: 600px; box-shadow: 0px 0px 20px black; border-radius: 20px; font-size: 12px; height: 150px; overflow: scroll; padding: 20px; text-align: center; position: relative; top: 200px; [/class] [class=hidden] display: none; [/class] [script class=tab1 on=click] show tabsContentabout hide tabsContentpreferences hide tabsContentplot [/script] [script class=tab2 on=click] show tabsContentpreferences hide tabsContentabout hide tabsContentplot [/script] [script class=tab3 on=click] show tabsContentplot hide tabsContentpreferences hide tabsContentabout [/script] [class name=tab state=hover] background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg'); [/class]

[div class=tabs][div class=tab1]about

[div class=tab2]preferences[/div][div class=tab3]plot[/div][/div] [div class=tabsContentabout] text here [/div] [div class="tabsContentpreferences hidden"] text here [/div] [div class="tabsContentplot hidden"] text here [/div] [/div]

Spoiler: code

[nobr]

[class=tabs]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
border-radius: 1000px;
box-shadow: 0px 0px 15px black;
color: black;
font-size: 18px;
font-weight: bold;
min-width: 350px;
text-align: center;
width: 50%;
margin: auto;
position: relative;
top: 170px;
[/class]

[class=tab1]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tab2]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tab3]
box-sizing: border-box;
cursor: pointer;
display: inline-block;
padding: 10px 0;
width: 33%;
border-radius: 50px;
[/class]

[class=tabsContentabout]
margin: auto; 
width: 600px;
box-shadow: 0px 0px 20px black; 
border-radius: 20px; 
font-size: 12px; 
height: 150px; 
overflow: scroll; 
padding: 20px; 
text-align: center;
position: relative;
top: 200px;
[/class]

[class=tabsContentpreferences]
margin: auto; 
width: 600px;
box-shadow: 0px 0px 20px black; 
border-radius: 20px; 
font-size: 12px; 
height: 150px; 
overflow: scroll; 
padding: 20px; 
text-align: center;
position: relative;
top: 200px;
[/class]

[class=tabsContentplot]
margin: auto; 
width: 600px;
box-shadow: 0px 0px 20px black; 
border-radius: 20px; 
font-size: 12px; 
height: 150px; 
overflow: scroll; 
padding: 20px; 
text-align: center;
position: relative;
top: 200px;
[/class]

[class=hidden]
display: none;
[/class]

[script class=tab1 on=click]
show tabsContentabout
hide tabsContentpreferences
hide tabsContentplot
[/script]

[script class=tab2 on=click]
show tabsContentpreferences
hide tabsContentabout
hide tabsContentplot
[/script]

[script class=tab3 on=click]
show tabsContentplot 
hide tabsContentpreferences
hide tabsContentabout
[/script]
 
[class name=tab state=hover]
background:url('https://i.pinimg.com/originals/ed/d7/4d/edd74de52629ba3f747f63c955e17440.jpg');
[/class]
[div=height: 650px;]
[imageFloat=center][div=margin-left: 38%; width:300px;height:300px; border: 5px solid; background:url('https://pbs.twimg.com/media/Dw9_U7UVsAAEkpP.jpg');background-size:110%; border-radius: 500px; text-align: center; margin-bottom: -150px][/div] [/imageFloat]

[div class=tabs][div class=tab1]about[/div][div class=tab2]preferences[/div][div class=tab3]plot[/div][/div]

[div class=tabsContentabout] text here
[/div]

[div class="tabsContentpreferences hidden"] text here :)

[/div]

[div class="tabsContentplot hidden"] text here
[/div]
[/div]
[/nobr]