Cathedris Themesong

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


 
BS5 Support
BS5 and BS3 compatible!

 
BBCode wordcount
Roughly 50 words

CSS line count
Roughly 200 lines
Price
FREEEEEE

Bundle Options
It's free :D




      These tabs are done through piggybacking off of spoilers, and applying animations to siblings all within a shared container. It's got a lot of CSS to go with it, but it's surprisingly not too complicated -- just a lot of repetative rules to make sure things move properly. The interesting part about these is that they don't use the spoiler content at all -- in fact, it's all hidden via CSS.   I've kept everything fairly simply styled, because that can be modified as you so choose, anyways. It's slightly complicated to add or remove tabs in the CSS, but once you understand what you're looking at, it's not too bad!   Check the tabs out below here, and then below the tabs will be the CSS and BBcode. Because this features extensive use of containers, these tabs will only work for Grandmasters and above.  

The Tabs

Tab 1
Tab 2
Tab 3
Tab 4
Tab 5
Tab 6

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

  • these
  • are
  • a
  • list
  • of
  • things
  • to
  • fill
  • out
  • this
  • tab
  • 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

    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!        

    Comments

    Please Login in order to comment!
    Sage Dylonishere123
    R. Dylon Elder
    14 Jul, 2021 07:40

    OH MY GOD! You did it. You cracked the code! ive been wanting something like this for ages! well done storm!

    14 Jul, 2021 22:26

    WOOO! INFINITE POWER VIA SPOILER BUTTONS!   Let me know if/how you end up using these :D


    Cathedris, the world of God-husks and New Magic, welcomes you.
    ~
    Come explore my competition entry, River Artazia
    Sage Dylonishere123
    R. Dylon Elder
    15 Jul, 2021 00:58

    Will do. Soooooon. I must learn how this thing works first XD such sorcery is beyond mere mortals like myself.

    17 Jul, 2021 11:49

    "Hippity hoppity your code is now my property"   This is something beyond awesome. Great work as always, css wizard of WA.

  • High Fantasy AXOLOTL
  • 17 Jul, 2021 22:50

    Huzzah! Thank you! :D   One thing I forgot to mention at the top of this article, but because this uses containers, only Grandmasters and above can use it, sadly D:


    Cathedris, the world of God-husks and New Magic, welcomes you.
    ~
    Come explore my competition entry, River Artazia
    28 Jul, 2021 16:45

    The time has come.   Now I have unlimited Power!   Meh, not really, but now I can use your tabs. :D

  • High Fantasy AXOLOTL
  • 28 Jul, 2021 17:38

    UNLIMITED POWER!   Congrats on the upgrade, have fun with all the lovely things you can do with containers :D


    Cathedris, the world of God-husks and New Magic, welcomes you.
    ~
    Come explore my competition entry, River Artazia
    30 Jul, 2021 13:10

    I recently integrated the table in one of my articles and it's freaking awesome (and useful af)!   https://www.worldanvil.com/w/dvds-hertzbube/a/gebiete-article?preview=true (scroll to the end)

  • High Fantasy AXOLOTL
  • 30 Jul, 2021 21:08

    Woah, that looks fantastic! I'm so excited it worked out for you, what an excellent use of them :D I'm really glad that image carousels and organization charts work so well within it too!


    Cathedris, the world of God-husks and New Magic, welcomes you.
    ~
    Come explore my competition entry, River Artazia
    9 Sep, 2021 22:52

    Hey Hertzbube! I'm doing some editing and cleaning up of some of my CSS showcase articles, and standardizing the layouts of them. I was wondering if you'd be okay with me putting your article at the bottom of this page under the "In Article Use Example" section!


    Cathedris, the world of God-husks and New Magic, welcomes you.
    ~
    Come explore my competition entry, River Artazia
    30 Sep, 2021 15:54

    Sorry for the late answer. You Idea here is great and it would be an honor for me to see my article here as example.

  • High Fantasy AXOLOTL
  • 5 Oct, 2021 06:12

    No worries at all! I'm very happy to hear that, and I'll add yours as an example now :D


    Cathedris, the world of God-husks and New Magic, welcomes you.
    ~
    Come explore my competition entry, River Artazia
    12 Sep, 2021 14:32

    Thank you soooooo much!! I needed this so much, but couldn't made the code myself. I was customizing it a bit and I was able to hide the text from other tabs, because i really wanted a transparent background. So the text from the tabs weren't overlapping each other. Only the blanktab wouldn't work with a transparent background (a solution would be a coloured background). But again, THANK YOU....Now I can make my world even more beautiful <3 <3

    13 Sep, 2021 03:37

    You are absolutely welcome! I'm very happy it's useful to you! :D   If you want, you can give me a link to an article where you've got the tabs working, and I can put it at the bottom of this article as an example use of them -- if you like, that is! No worries if not, I just like showing how people use the things <3


    Cathedris, the world of God-husks and New Magic, welcomes you.
    ~
    Come explore my competition entry, River Artazia
    20 Jun, 2022 00:09

    I love this CSS, but the second I tried to implement it into one of my articles, the spoilers still try to open like they're regular spoilers. And this is just by copy-pasting the CSS and BBcode straight from this article (the CSS is in the article CSS), and I have no theme chosen for my world. I also made sure all the spaces between the / and the * were closed.

    Feel free to check out my WIP novel, His Mate!
    20 Jun, 2022 00:30

    Oh no! Sometimes that happens. If you want, you can DM me on discord and I can give you the exact CSS I'm using on this page, or link me a test article on your world so I can poke around with the inspector and see what's up.


    Cathedris, the world of God-husks and New Magic, welcomes you.
    ~
    Come explore my competition entry, River Artazia
    Powered by World Anvil