Help Tabs that open from the bottom up?

[xayah.]

I’m trying to get a better understanding for tabs since I would love to utilize them like the other great coders on this site, but I just don’t understand how sometimes they disappear once you insert code into them or how people get the tabs to reveal an entirely different section with its own tab area. I’ve linked the code I’m working on below, and I’d appreciate any advice on how I could implement a tab into the crown section of the code so that it could reveal a new section with its own tabs?

Spoiler: Code

[comment]variables ~ by xayah.[/comment]
[border=2px solid white;
/*big image - background must be transparent*/
--big-img: url('https://o.remove.bg/downloads/4fd6cf67-2209-4c31-9753-7564715e481a/Efrl3eaVAAAUseG-removebg-preview.png');

/*side images*/
--left-image:url('https://o.remove.bg/downloads/acabffda-582c-4e77-8ef4-dc91d01e67a2/f982855354b83c70ad23f869a31f6d96-removebg-preview.png');
--right-image: url('https://o.remove.bg/downloads/36e56626-1971-4dfa-9377-14699ef92b85/E3Nk2qCVcAcla7y-removebg-preview.png');

/*black & white filter*/
-- filter: saturate(10%) brightness(80%) contrast(120%);

/*background overlay image*/
--background: url('https://i.pinimg.com/originals/42/0b/04/420b04e86d6867b7aa6350c52713fbf8.jpg');

/*name font*/
--font: Fira Sans;

/*quote font*/
--qfont: Klee One

/*complimentary color*/
--light-green: #daf7a6;

/*quote font size*/
--size: 15pt;

height: 600px; max-width: 400px; background-color: #C5C5C0; margin: auto; padding: 0; line-height: 0; overflow: hidden; position: relative;]

[comment]top portion[/comment]
[comment]NAME[/comment]
[border=0; height: 33%; display: block; padding: 0;][border=2px solid transparent; width: 15%; height: 195%; padding: 3px; float: left; text-align: center; line-height: 29px; font-size: 30px; letter-spacing: 15px; font-style: italic; text-transform: uppercase; text-shadow: 5px 2px 3px black; position: relative; color: #daf7a6][font=Fira Sans]
F
i
r
s
t

L
a
s
t[/font][/border]

[comment]PICTURE - SIDE PROFILE[/comment]

[border=0px solid transparent; width: 45%; padding: 0; float: left; height: 99%; background:var(--left-image); background-size: cover; filter: saturate(10%) brightness(80%) contrast(120%);][/border]

[comment]QUOTE OR LYRIC[/comment]

[border=0px solid transparent; border-left: 2px solid white; width: 32%; padding: 8px; float: left; height: 99%; line-height: 10px; color: fff; font-size: 30px; text-align: justify; text-transform: uppercase; font-weight: bold; word-spacing: 2px; font-style: italic; text-shadow: 2px 2px 2px black, 1px 1px 1px black;]

❝
[font=Klee One] I hope I can become someone’s dream. [/font]


❞

— seulgi
kang
[/border]

[/border]


[comment]middle portion[/comment]
[comment]SIMPLE BACKGROUND[/comment]
[border=2px solid white; height: 33%; display: block; padding: 0; background: var(--background); background-size: 50%;]

[comment]FRONT PROFILE PICTURE[/comment]
[border=1px solid transparent; height: 150%; display: block; padding: 0; margin-top: -101px; background: var(--big-img); background-size: 80%; background-repeat: no-repeat; background-position: 50% 5%; position: relative;][/border]

[comment]FACECLAIM[/comment]
[border=0; width: 50%; height: 10%; padding: 0px; padding-right: 15px; margin-top: -25px; float: right; font-size: 15px; line-height: 25px; text-align: right; position: relative; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 4px black, 2px 2px 1px #DAF7A6; font-weight: bolder; font-style: oblique;]FC: Seulgi Kang [/border][/border]

[comment]bottom portion[/comment]
[border=2px solid transparent; border-right: 2px solid white; height: 33%; width: 50%; display: block; padding: 0; float: left;]

[comment]TABS[/comment]
[border=0px solid green; height: 30px; width: 50%; margin: auto; margin-top: 80px; margin-left: 65px; padding: 0; overflow: hidden;][tabs][tab=B] rawr[/tab]
[/tabs][/border]
[/border]

[comment]PICTURE - SIDE PROFILE[/comment]
[border=0px solid transparent; height: 34%; width:45%; display: block; padding: 0; float: left; background:var(--right-image); background-size: cover; filter: saturate(10%) brightness(80%) contrast(120%);][/border]

[comment]BEAR - TAB COVER[/comment]
[border=0; height: 10%; width: 30%; margin:auto; margin-left: 36px; margin-top: 30px; pointer-events: none; position: absolute; font-weight:bold; text-transform:uppercase; line-height:0; font-size:100px; color: #b19bdc; text-shadow: 5px 5px 2px #daf7a6, 2px 3px 3px #fff; opacity: 1;][fa]fas fa-chess-queen[/fa][/border]

[comment]TAB NOTICE[/comment]
[border=2px solid transparent; height: 2%; width: 30%; margin: auto;  margin-left: 23px; margin-top: 135px; padding: 10px; position: absolute; text-align: center; text-transform: uppercase; line-height: 0px; text-shadow: 2px 2px 2px black, 3px 3px 1px #DAF7A6; font-weight: bolder; font-style: oblique;]click[/border]
[/border]

 

[weldherwings]

I think I know what you're trying to get across but my brain is very empty and goes bonk 120% of the time. First off, Uxie is amazing with tabs. She is an absolute wizard. Maybe a check at some of her tab work to see if any of it can make some sense? Secondly, generally, when I try to do what I think you're explaining, it's a tab within a tab. Does that make sense?

Like, if we didn't have all the fancy stuff, it'd look like this:

• hey
• yo

• hi i am a tab
• • one
  • two

  • whhhat
  • eeeeeee~!

 

[Uxie]

hello! it's as steph has mentioned above that it would simply be tabs within a tab. the way i'd recommend you doing it is to make use of a position:absolute; tab container within the tab that covers your entire code! you can see a version of positioning tab buttons in the middle of the code here, as well as my mini-tutorial on tabs here
for some of the full codes i've made that make use of a similar method, please refer to this and this for some code examples of how i achieved the same effect previously

otherwise, here's a tiny code snippet of what i would advise you to do! i'm running off the assumption that you already understand tabs to some degree at this point so i'll skip providing an in-depth explanation, but let me know if you have any questions! ( ´ ω ` )

• .
• .

• filler tab so you can actually see your lobby page. you can also just put all of your lobby coding in this tab too if that's what you prefer! but make sure there's text so the tab works
• 
  
  
  

  • .
  • .

  • all your funky little inside tabs!
  • and all of the funky little contents will go here!

  
  
  

Spoiler: code

[border=0; height:250px; width:150px; padding:10px; box-sizing:border-box; background:red; position:relative; line-height:0;] [border=0; height:30px; /*set width so buttons will wrap and overflow:hidden will cover the top (first) button*/ width:50px; padding:0; overflow:hidden; background:blue; /*you can position these buttons either with flex or with margins. it wont affect your contents so long as you use position:absolute on the contents*/ margin-top:50px;][border=0; padding:0; /*negative top margin to cover up the other button*/ margin:-25px 0px 0 -20px;][tabs] [tab=.][border=0; height:100%; width:100%; padding:0; color:transparent;]filler tab so you can actually see your lobby page. you can also just put all of your lobby coding in this tab too if that's what you prefer! but make sure there's text so the tab works[/border][/tab] [comment]-----actual content tab----[/comment] [tab=.][border=0; height:100%; width:100%; padding:10px; box-sizing:border-box; background:blue; position:absolute; top:0; left:0; color:#fff;] [comment]----second set of tabs----[/comment] [border=transparent; height:30px; width:150px; padding:0; overflow:hidden;][border=transparent; padding:0; /*right margin is to make sure your tabs don't wrap or anything bc tab padding is dumb!*/ margin:0 -40px 0 -15px;][tabs] [tab=.][border=transparent; height:80%; width:100%; padding:10px; box-sizing:border-box; position:absolute; bottom:0; right:0; background:green; line-height:100%;]all your funky little inside tabs![/border][/tab] [tab=.][border=transparent; height:80%; width:100%; padding:10px; box-sizing:border-box; position:absolute; bottom:0; right:0; background:green; line-height:100%;]and all of the funky little contents will go here![/border][/tab] [/tabs][/border][/border] [/border][/tab] [/tabs][/border][/border] [/border]

hope this helps!!! ٩(｡•́‿•̀｡)۶

 

[xayah.]

ah ty guys so much. that actually helped a lot