Spoiler Button Tabs
To buy this -- wait a minute, you don't need to buy this! This is FREE! Though, it's still limited to only those with Grandmaster or above membership, because it uses containers.
Stats at a glance
The Tabs
Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6
these
are
a
list
of
things
to
fill
out
this
tab
THIS IS CONTENT IN TAB 1
Woo look at it, it supports whatever you want, like columns and pictures -- but not more spoilers.COLUMN-1-CONTENT
This is a quote in a column that is on tab 1
COLUMN-2-CONTENT
COLUMN-3-CONTENT
This is an aloud in a column that is on tab 1
Lorem Ipsum
Aliquam ut justo hendrerit, luctus quam a, laoreet arcu. Cras elit velit, ornare at velit id, gravida mattis neque. In consequat metus nec magna convallis imperdiet at fermentum odio. Sed non lorem nec dui malesuada porttitor eu vitae justo. Pellentesque a erat venenatis, convallis tortor non, imperdiet lacus. Donec quis euismod justo. Aliquam erat volutpat. Aenean vel mollis eros. Etiam nec sapien metus. Pellentesque id cursus metus. Nam tristique luctus sollicitudin. Fusce venenatis orci interdum, bibendum nisl non, dapibus ipsum. Sed sit amet sodales nunc. Aliquam sit amet risus eget sapien lacinia ultrices. Proin a luctus nulla. Aliquam ut justo hendrerit, luctus quam a, laoreet arcu. Cras elit velit, ornare at velit id, gravida mattis neque. In consequat metus nec magna convallis imperdiet at fermentum odio. Sed non lorem nec dui malesuada porttitor eu vitae justo. Pellentesque a erat venenatis, convallis tortor non, imperdiet lacus. Donec quis euismod justo. Aliquam erat volutpat. Aenean vel mollis eros. Etiam nec sapien metus. Pellentesque id cursus metus. Nam tristique luctus sollicitudin. Fusce venenatis orci interdum, bibendum nisl non, dapibus ipsum. Sed sit amet sodales nunc. Aliquam sit amet risus eget sapien lacinia ultrices. Proin a luctus nulla.Small column
Aenean vel mollis eros. Etiam nec sapien metus. Pellentesque id cursus metus. Nam tristique luctus sollicitudin. Fusce venenatis orci interdum, bibendum nisl non, dapibus ipsum. Sed sit amet sodales nunc. Aliquam sit amet risus eget sapien lacinia ultrices. Proin a luctus nulla.Big Column
Aenean vel mollis eros. Etiam nec sapien metus. Pellentesque id cursus metus. Nam tristique luctus sollicitudin. Fusce venenatis orci interdum, bibendum nisl non, dapibus ipsum. Sed sit amet sodales nunc. Aliquam sit amet risus eget sapien lacinia ultrices. Proin a luctus nulla.Big column
Aenean vel mollis eros. Etiam nec sapien metus. Pellentesque id cursus metus. Nam tristique luctus sollicitudin. Fusce venenatis orci interdum, bibendum nisl non, dapibus ipsum. Sed sit amet sodales nunc. Aliquam sit amet risus eget sapien lacinia ultrices. Proin a luctus nulla.Small Column
Aenean vel mollis eros. Etiam nec sapien metus. Pellentesque id cursus metus. Nam tristique luctus sollicitudin. Fusce venenatis orci interdum, bibendum nisl non, dapibus ipsum. Sed sit amet sodales nunc. Aliquam sit amet risus eget sapien lacinia ultrices. Proin a luctus nulla.Bullet Points
And whatever else you might want to fit in here!
These tabs are very flexible and can fit almost anything in.
Choose one of the 6 tabs above!
This is content below the tabs. The tab container has a base height of 500px -- this can be changed within the CSS to match your content, however. The tabs themselves can have the same, or different heights, depending on your preferences! I personally think it works better if they're all the exact same size, but that's up to you. I wanted to find some way of making all the tabs automatically match the height of the longest one, but as far as I can tell, that's not possible. If you know of a way, please let me know!
Throwing my hat in the ring with attempting to replicate some JS style tabs, using nothing but the CSS we can modify!
The Code
NOTE: You will need to ensure to turn off the "Visibility Toggle" option on your world configuration options in order for these tabs to work. You'll find the option under Configuration > Display > Visibility Toggle
CSS
Note: You will need to remove the space between the / and the * on the comments in the CSS. The space needed to be added so that they'd show up on here./ *THIS CODE IS FOR JS STYLE TABS* /
/ *These are the animations that bring tabs forward and backward* /
@keyframes forward {
from { }
to { z-index: 5;}
}
@keyframes back {
from { }
to { z-index: -10;}
}
/ *This controls the styling of the tab buttons* /
.tabholder .spoiler-button {
display: inline-block;
background: gray;
color: black !important;
border-left: 3px solid #a08264;
border-right: 3px solid #a08264;
border-top: 3px solid #a08264;
}
/ *This is the styling for the button/tab you are focused on* /
.tabholder .spoiler-button:focus {
background: lightgray;
}
/ *This controls the styling of the tabs, including the base blank tab. Make sure to leave all of the animation rules alone.* /
.tab1,
.tab2,
.tab3,
.tab4,
.tab5,
.tab6,
.blanktab {
animation-name: forward;
animation-duration: 1ms;
animation-fill-mode: forwards;
animation-play-state: paused;
background: lightgray;
color: black;
padding: 15px;
margin-top: -11px;
width: 100%;
position: absolute;
display: block;
z-index: -1;
border-left: 3px solid #a08264;
border-right: 3px solid #a08264;
border-bottom: 3px solid #a08264;
border-radius: 0px 10px 10px;
}
/ *Provides a base Z-index and background colour to the blank(first) tab* /
.blanktab {
z-index: 0;
background: gray;
}
/ *Controls size and positioning of the entire tab container, as well as headers in the next selector* /
.tabholder {
margin-bottom: 50px;
min-height: 300px;
height: 500px;
position: relative;
width: 100%;
}
.tabholder h2,
.tabholder h3,
.tabholder h4,
.tabholder h5{
color: black !important;
}
/ *Hides the pesky spoiler button content -- we don't need those, we just want the buttons.* /
.tabholder .well,
.tabholder .collapse.in,
.tabholder .collapsing,
.tabholder .card {
display: none;
}
/ *From this point on, this CSS is for connecting spoiler buttons to tabs. Each section will have rules for a button bringing its corresponding tab to the front, while sending each other to the back. You shouldn't have to change any of the actual rules in here, but just modify the selectors when you want to add or remove tabs.* /
/ *This section takes the FIRST spoiler button when clicked on, and brings the FIRST tab out* /
.tabholder .spoiler-button:nth-child(1):focus ~ .tab1 {
animation-name: forward;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}
/ *This section takes the FIRST spoiler button when clicked on, and sends every other tab to the back. If you want to add or remove tabs, you need to make sure you have this section properly filled out.* /
.tabholder .spoiler-button:nth-child(1):focus ~ .tab2,
.tabholder .spoiler-button:nth-child(1):focus ~ .tab3,
.tabholder .spoiler-button:nth-child(1):focus ~ .tab4,
.tabholder .spoiler-button:nth-child(1):focus ~ .tab5,
.tabholder .spoiler-button:nth-child(1):focus ~ .tab6 {
animation-name: back;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}
/ *This section takes the SECOND spoiler button when clicked on, and brings the SECOND tab out. I'm sure you can see the pattern now. The nth-child spoiler buttons count upwards by two, so make sure to pay attention to that when modifying and adding/removing more tabs.* /
.tabholder .spoiler-button:nth-child(3):focus ~ .tab2 {
animation-name: forward;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}
.tabholder .spoiler-button:nth-child(3):focus ~ .tab1,
.tabholder .spoiler-button:nth-child(3):focus ~ .tab3,
.tabholder .spoiler-button:nth-child(3):focus ~ .tab4,
.tabholder .spoiler-button:nth-child(3):focus ~ .tab5,
.tabholder .spoiler-button:nth-child(3):focus ~ .tab6 {
animation-name: back;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-play-state: running;
}
.tabholder .spoiler-button:nth-child(5):focus ~ .tab3 {
animation-name: forward;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}
.tabholder .spoiler-button:nth-child(5):focus ~ .tab1,
.tabholder .spoiler-button:nth-child(5):focus ~ .tab2,
.tabholder .spoiler-button:nth-child(5):focus ~ .tab4,
.tabholder .spoiler-button:nth-child(5):focus ~ .tab5,
.tabholder .spoiler-button:nth-child(5):focus ~ .tab6 {
animation-name: back;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}
.tabholder .spoiler-button:nth-child(7):focus ~ .tab4 {
animation-name: forward;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}
.tabholder .spoiler-button:nth-child(7):focus ~ .tab1,
.tabholder .spoiler-button:nth-child(7):focus ~ .tab2,
.tabholder .spoiler-button:nth-child(7):focus ~ .tab3,
.tabholder .spoiler-button:nth-child(7):focus ~ .tab5,
.tabholder .spoiler-button:nth-child(7):focus ~ .tab6 {
animation-name: back;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}
.tabholder .spoiler-button:nth-child(9):focus ~ .tab5 {
animation-name: forward;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}
.tabholder .spoiler-button:nth-child(9):focus ~ .tab1,
.tabholder .spoiler-button:nth-child(9):focus ~ .tab2,
.tabholder .spoiler-button:nth-child(9):focus ~ .tab3,
.tabholder .spoiler-button:nth-child(9):focus ~ .tab4,
.tabholder .spoiler-button:nth-child(9):focus ~ .tab6 {
animation-name: back;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}
.tabholder .spoiler-button:nth-child(11):focus ~ .tab6 {
animation-name: forward;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}
.tabholder .spoiler-button:nth-child(11):focus ~ .tab1,
.tabholder .spoiler-button:nth-child(11):focus ~ .tab2,
.tabholder .spoiler-button:nth-child(11):focus ~ .tab3,
.tabholder .spoiler-button:nth-child(11):focus ~ .tab4,
.tabholder .spoiler-button:nth-child(11):focus ~ .tab5 {
animation-name: back;
animation-duration: 0s;
animation-fill-mode: forwards;
animation-play-state: running;
}BBCODE
The BBcode is rather simple! There is one overall container, "tabholder", that holds everything. The first things entered in this container are the spoiler buttons -- these are the buttons that will let us bring tabs forward and backward. You don't need any content in them, but make sure to give each of them a name, like how I have them named Tab 1, 2, 3, etc. After that, it's a simple matter of putting the content you want into the corresponding containers afterwards. Hopefully I've named everything clearly enough that it makes sense which is which, and which button interacts with which tab.
[container:tabholder]
[spoiler]|Tab 1[/spoiler]
[spoiler]|Tab 2[/spoiler]
[spoiler]|Tab 3[/spoiler]
[spoiler]|Tab 4[/spoiler]
[spoiler]|Tab 5[/spoiler]
[spoiler]|Tab 6[/spoiler]
[container:tab1]
-tab 1 content goes here-
[/container]
[container:tab2]
-tab 2 content goes here-
[/container]
[container:tab3]
-tab 3 content goes here-
[/container]
[container:tab4]
-tab 4 content goes here-
[/container]
[container:tab5]
-tab 5 content goes here-
[/container]
[container:tab6]
-tab 6 content goes here-
[/container]
[container:blanktab]
-this is where you put the content that shows before any tabs are selected-
[/container]
[/container]
Final notes
I've attempted to keep this as barebones as possible, so that further styling can be applied to it. I've tried to only include CSS rules that are absolutely necessary, plus base styling to make them readable. If you're a CSS-wizard, it should be easy enough to take this and build some neat things off of it. Spoiler buttons allow us to get up to some really fun shenanigans! Let me know if this seems useful or neat, and if you end up using it, I'd absolutely love to see your implementation!
As with my other CSS add-on creations, I would very much appreciate credit or even a link back to this article if possible! If you've enjoyed it, I'd love for others to be able to easily find this page and have a chance to implement it themselves as well :)
OH MY GOD! You did it. You cracked the code! ive been wanting something like this for ages! well done storm!
WOOO! INFINITE POWER VIA SPOILER BUTTONS! Let me know if/how you end up using these :D
Will do. Soooooon. I must learn how this thing works first XD such sorcery is beyond mere mortals like myself.