Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

Tabs within Tabs

1634036411
Darren H.
Pro
Sheet Author
I'm trying to get a tab within another tab to link to a new page.  I can get the tab to appear within the other tab but can't seem to get it go anywhere when pressing it. I've added new tab to the CSS and to the text/worker at the bottom of the charsheet. Any advice would be grateful.
1634041049
Finderski
Pro
Sheet Author
Compendium Curator
We'd need to see the HTML and CSS to really help. My guess is, the CSS needs adjusting for a tab nested within another tab, but...without the code we can't really say for certain. With the code, we'd also need to know which tab and sub-tab we are talking about.
1634062583
Darren H.
Pro
Sheet Author
This is the CSS right now, I'm working on it as a seperate tab just to get things working,  I can get the tab to appear in the .magic-sheet on the character sheet but it does not go to anything when i click on it.  I'm useless at more complex CSS.  So i do want the Summons in the Magic section. .sheet-character, .sheet-magic, .sheet-decks, .sheet-gear, .sheet-vehicles, .sheet-combat, .sheet-drones, .sheet-summons, .sheet-skills{     display: none;     color: black;     } .sheet-tabstoggle[value="character"] ~ div.sheet-character, .sheet-tabstoggle[value="decks"] ~ div.sheet-decks, .sheet-tabstoggle[value="magic"] ~ div.sheet-magic, .sheet-tabstoggle[value="gear"] ~ div.sheet-gear, .sheet-tabstoggle[value="vehicles"] ~ div.sheet-vehicles, .sheet-tabstoggle[value="combat"] ~ div.sheet-combat, .sheet-tabstoggle[value="drones"] ~ div.sheet-drones, .sheet-tabstoggle[value="summons"] ~ div.sheet-summons, .sheet-tabstoggle[value="skills"] ~ div.sheet-skills{     display: block; }
1634066492

Edited 1634066564
Andreas J.
Forum Champion
Sheet Author
Translator
We need the HTML as well.
1634066571
Finderski
Pro
Sheet Author
Compendium Curator
Without the HTML I can only guess, but in looking at the CSS, you summons div is expected to be at the same level as the magic level. I'm guessing it's a child Meaning, things looks something like: <input class="sheet-tabstoggle" name="tabstoggl" value="magic" /> <div class="sheet-character"> <!-- Stuff goes here --> </div> <div class="sheet-decks"> <!-- Stuff goes here --> </div> <div class="sheet-magic"> <input for magic tabs...> <div class="sheet-summons"> <!-- Stuff goes here --> </div <div class="sheet-another-tab"> <!-- Stuff goes here --> </div> </div> If the same tabs goggle is being used for summons, then you're CSS would need to looks something like: .sheet-tabstoggle[value="summons"] ~ .sheet-magic > .sheet-summons { display: block; } But, again, without the HTML + CSS it's hard to give you specific advise/help.
1634074886
Darren H.
Pro
Sheet Author
Finderski, that's exactly how i'm trying to do it in html, what you wrote is what i was trying to do, just insert it into the Magic Tab.  I think the CSS you have given as an example will help.  Thanks.  Another bit of code I have learnt.  I'll see how it goes.  Thanks for the help :)
1634084855
Finderski
Pro
Sheet Author
Compendium Curator
Just an FYI, if you're using the same input field to show a sub tab, you'll likely need to do something like this: .sheet-tabstoggle[value="summons"] ~ .sheet-magic, .sheet-tabstoggle[value="summons"] ~ .sheet-magic > .sheet-summons { display: block; } Otherwise, it may work, but you still wouldn't see summons, because the section it's a child of wouldn't be visible.