tabs on sheet

is it posible to get tabs to work on a character sheet? currently Roll20 seems to be throwing a fit and not showing anything save the tabs, where w3schools shows the content as well while I'm asking I'm looking to make a vertical slider bar as well, is this possible?

Did you try the tab example from the wiki? <a href="https://wiki.roll20.net/CSS_Wizardry#Tabs" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Tabs</a>

Show the code you've tried, and we can tell you what needs to be done to fix it for roll20.

Kraynic said: Did you try the tab example from the wiki? <a href="https://wiki.roll20.net/CSS_Wizardry#Tabs" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Tabs</a> now content won't hide, am I screwing up the code? &lt;input type="hidden" class="sheet-tabstoggle" name="attr_sheetTab" value="character"/&gt; &lt;div class="tab"&gt; &lt;button type="action" name="act_ship_power" &gt;Ship Power&lt;/button&gt; &lt;button type="action" name="act_ship_floor_1" &gt;Floor 1&lt;/button&gt; &lt;button type="action" name="act_ship_floor_2" &gt;Floor 2&lt;/button&gt; &lt;button type="action" name="act_ship_floor_3" &gt;Floor 3&lt;/button&gt; &lt;button type="action" name="act_ship_floor_4" &gt;Floor 4&lt;/button&gt; &lt;button type="action" name="act_ship_floor_5" &gt;Floor 5&lt;/button&gt; &lt;/div&gt; &lt;div class="ship power"&gt; &lt;span&gt;test power&lt;/span&gt; &lt;/div&gt; &lt;div class="ship floor 1"&gt; &lt;span&gt;test floor 1&lt;/span&gt; &lt;/div&gt; &lt;div class="ship floor 2"&gt; &lt;span&gt;test floor 2&lt;/span&gt; &lt;/div&gt; &lt;div class="ship floor 3"&gt; &lt;span&gt;test floor 3&lt;/span&gt; &lt;/div&gt; &lt;div class="ship floor 4"&gt; &lt;span&gt;test floor 4&lt;/span&gt; &lt;/div&gt; &lt;div class="ship floor 5"&gt; &lt;span&gt;test floor 5&lt;/span&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; const buttonlist = ["Ship Power","Floor 1","Floor 2","Floor 3","Floor 4","Floor 5"]; buttonlist.forEach(button =&gt; { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button }); }); }); &lt;/script&gt; .charsheet .ship-power, .charsheet .ship-floor-1, .charsheet .ship-floor-2, .charsheet .ship-floor-3, .charsheet .ship-floor-4, .charsheet .ship-floor-5 { display: none; } .charsheet .sheet-tabstoggle[value="ship_power"] ~ div.ship-power, .charsheet .sheet-tabstoggle[value="ship_floor_1"] ~ div.ship-floor-1, .charsheet .sheet-tabstoggle[value="ship_floor_2"] ~ div.ship-floor-2, .charsheet .sheet-tabstoggle[value="ship_floor_3"] ~ div.ship-floor-3, .charsheet .sheet-tabstoggle[value="ship_floor_4"] ~ div.ship-floor-4, .charsheet .sheet-tabstoggle[value="ship_floor_5"] ~ div.ship-floor-5 { display: block; }

In your button list, you aren't using the actual button names. Look at this code: &lt;button type="action" name="act_ship_power" &gt;Ship Power&lt;/button&gt; &lt;button type="action" name="act_ship_floor_1" &gt;Floor 1&lt;/button&gt; &lt;button type="action" name="act_ship_floor_2" &gt;Floor 2&lt;/button&gt; &lt;button type="action" name="act_ship_floor_3" &gt;Floor 3&lt;/button&gt; &lt;button type="action" name="act_ship_floor_4" &gt;Floor 4&lt;/button&gt; &lt;button type="action" name="act_ship_floor_5" &gt;Floor 5&lt;/button&gt; Here the bit between &gt; and &lt; is the display text - that's for users looking at the sheet. But the actual button code, is bit after name="act_ (the act_ part not actually being part of the name) So the buttonlist in your sheet worker should be &lt;script type="text/worker"&gt; const buttonlist = ["ship_power","ship_floor_1","ship_floor_2","ship_floor_3","ship_floor_4","ship_floor_5"]; buttonlist.forEach(button =&gt; { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button }); }); }); &lt;/script&gt;

The class names all have spaces in them.&nbsp; The only time there should be spaces is if you are assigning more than one class to something. The html class is "ship power", but the css is for "ship-power".&nbsp; The html should match the css for class names.

GiGs said: Show the code you've tried, and we can tell you what needs to be done to fix it for roll20. old code I was using &lt;div class="tab"&gt; &lt;button class="tablinks" onclick="openPanel(event, 'Power')"&gt;Power&lt;/button&gt; &lt;button class="tablinks" onclick="openPanel(event, 'Floor 1')"&gt;Floor 1&lt;/button&gt; &lt;button class="tablinks" onclick="openPanel(event, 'Floor 2')"&gt;Floor 2&lt;/button&gt; &lt;button class="tablinks" onclick="openPanel(event, 'Floor 3')"&gt;Floor 3&lt;/button&gt; &lt;button class="tablinks" onclick="openPanel(event, 'Floor 4')"&gt;Floor 4&lt;/button&gt; &lt;button class="tablinks" onclick="openPanel(event, 'Floor 5')"&gt;Floor 5&lt;/button&gt; &lt;/div&gt; &lt;div id="ship-power" class="tablinks"&gt; &lt;span&gt;test power&lt;/span&gt; &lt;/div&gt; &lt;div id="ship-floor-1" class="tablinks"&gt; &lt;span&gt;test floor 1&lt;/span&gt; &lt;/div&gt; &lt;div id="ship-floor-2" class="tablinks"&gt; &lt;span&gt;test floor 2&lt;/span&gt; &lt;/div&gt; &lt;div id="ship-floor-3" class="tablinks"&gt; &lt;span&gt;test floor 3&lt;/span&gt; &lt;/div&gt; &lt;div id="ship-floor-4" class="tablinks"&gt; &lt;span&gt;test floor 4&lt;/span&gt; &lt;/div&gt; &lt;div id="ship-floor-5" class="tablinks"&gt; &lt;span&gt;test floor 5&lt;/span&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; function openPanel(evt, panelName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i &lt; tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i &lt; tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(panelName).style.display = "block"; evt.currentTarget.className += " active"; } &lt;/script&gt; .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; }

Kraynic said: The class names all have spaces in them.&nbsp; The only time there should be spaces is if you are assigning more than one class to something. The html class is "ship power", but the css is for "ship-power".&nbsp; The html should match the css for class names. I didn't spot that. That's the other problem. In your CSS you have replaced the spaces with hyphens - you should do that in the html as well.

This could won't work on Roll20: &lt;button class="tablinks" onclick="openPanel(event, 'Power')"&gt;Power&lt;/button&gt; Thats for sites that allow javascript on page, but roll20 doesnt. It only allows a limited subset of javascript in sheet workers, which can only set attribute values or make rolls.

The previous code should work, I think, with the sheet worker change I suggested and the HTML class change Kraynic suggested.

Kraynic said: The class names all have spaces in them.&nbsp; The only time there should be spaces is if you are assigning more than one class to something. The html class is "ship power", but the css is for "ship-power".&nbsp; The html should match the css for class names. fixed that now back to the pervious issue buttons don't show jack

GiGs said: In your button list, you aren't using the actual button names. Look at this code: &lt;button type="action" name="act_ship_power" &gt;Ship Power&lt;/button&gt; &lt;button type="action" name="act_ship_floor_1" &gt;Floor 1&lt;/button&gt; &lt;button type="action" name="act_ship_floor_2" &gt;Floor 2&lt;/button&gt; &lt;button type="action" name="act_ship_floor_3" &gt;Floor 3&lt;/button&gt; &lt;button type="action" name="act_ship_floor_4" &gt;Floor 4&lt;/button&gt; &lt;button type="action" name="act_ship_floor_5" &gt;Floor 5&lt;/button&gt; Here the bit between &gt; and &lt; is the display text - that's for users looking at the sheet. But the actual button code, is bit after name="act_ (the act_ part not actually being part of the name) So the buttonlist in your sheet worker should be &lt;script type="text/worker"&gt; const buttonlist = ["ship_power","ship_floor_1","ship_floor_2","ship_floor_3","ship_floor_4","ship_floor_5"]; buttonlist.forEach(button =&gt; { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button }); }); }); &lt;/script&gt; that fixed it

Additionally, your div classes have spaces in them which means they are actually multiple classes instead of one hyphenated class. I also might recommend taking a look at the jQuery functionality. It's how I've started handling all of my tab sheets: HTML &lt;input type="hidden" class="sheet-tabstoggle" name="attr_sheet_tab" value="ship-power"/&gt; &lt;nav class="tab"&gt; &lt;button type="action" name="act_ship-power" class='nav-button nav-button--ship-power' &gt;Ship Power&lt;/button&gt; &lt;button type="action" name="act_ship-floor-1" class='nav-button nav-button--ship-floor-1' &gt;Floor 1&lt;/button&gt; &lt;button type="action" name="act_ship-floor-2" class='nav-button nav-button--ship-floor-2' &gt;Floor 2&lt;/button&gt; &lt;button type="action" name="act_ship-floor-3" class='nav-button nav-button--ship-floor-3' &gt;Floor 3&lt;/button&gt; &lt;button type="action" name="act_ship-floor-4" class='nav-button nav-button--ship-floor-4' &gt;Floor 4&lt;/button&gt; &lt;button type="action" name="act_ship-floor-5" class='nav-button nav-button--ship-floor-5' &gt;Floor 5&lt;/button&gt; &lt;/nav&gt; &lt;div class="navigable-section navigable-section--ship-power"&gt; &lt;span&gt;test power&lt;/span&gt; &lt;/div&gt; &lt;div class="navigable-section navigable-section--ship-floor-1"&gt; &lt;span&gt;test floor 1&lt;/span&gt; &lt;/div&gt; &lt;div class="navigable-section navigable-section--ship-floor-2"&gt; &lt;span&gt;test floor 2&lt;/span&gt; &lt;/div&gt; &lt;div class="navigable-section navigable-section--ship-floor-3"&gt; &lt;span&gt;test floor 3&lt;/span&gt; &lt;/div&gt; &lt;div class="navigable-section navigable-section--ship-floor-4"&gt; &lt;span&gt;test floor 4&lt;/span&gt; &lt;/div&gt; &lt;div class="navigable-section navigable-section--ship-floor-5"&gt; &lt;span&gt;test floor 5&lt;/span&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; const navigateSheet = function(event){ const target = event.triggerName.replace(/clicked:/,'');//Parse out our actual target console.log(target); $20('.navigable-section,.nav-button').removeClass('active'); $20(`.navigable-section--${target},.nav-button--${target}`).addClass('active'); setAttrs({sheet_tab:target},{silent:true}); }; on('sheet:opened',()=&gt;{//Since we're using the jQuery method, we need to apply our class each time the sheet is opened as well. getAttrs(['sheet_tab'],(attributes)=&gt;{ navigateSheet({trigerName:attributes.sheet_tab}); }); }); const buttonlist = ["ship-power","ship-floor-1","ship-floor-2","ship-floor-3","ship-floor-4","ship-floor-5"]; buttonlist.forEach(button =&gt; { on(`clicked:${button}`, navigateSheet); }); &lt;/script&gt; In the html, I'm using the Block Element Model class syntax to make it explicit what is going on. This isn't necessary for this to work, but I think makes the overall code more readable when you come back to it 6 months down the line wondering what you were thinking when it was first written. There is one thing to consider when using the jQuery method for tabs; it is a client side change only, and is not persistent. This is why we have the sheet open listener as well. This also means that you can have two users of a sheet looking at two separate tabs of the same sheet. CSS Because we're using the jQuery, our CSS can be MUCH simpler. .navigable-section:not(.active){ display:none !important;/* Using important here because if the tab isn't active we really don't want the section to show */ } .nav-button.active{ background-color:blue;/* You can style the button for the active tab to make it obvious */ } And, that's it. EDIT: And sniped on the spaces in the class names issue while I was writing up the jquery demo. EDIT 2: Also, note that this method is extremely extensible. The navigateSheet function doesn't care whether you've got just two tabs or 200. It's just reacting based on the name of the action button that was clicked.

And, then because I just noticed the question, what do you mean by a vertical slider bar? If you mean something like this codepen , the anser is unfortunately no (or at least range inputs don't seem to work reliably. The closest you can come is using one of the fill-to-left radio button tricks to fake it.

okay shifting it back up a level brought the ever present problem back &lt;input type="hidden" class="sheet-tabstoggle" name="attr_ship_control_tabs" value="character"/&gt; &lt;div class="tab"&gt; &lt;button type="action" name="act_ship_power" &gt;Ship Power&lt;/button&gt; &lt;button type="action" name="act_ship_floor_1" &gt;Floor 1&lt;/button&gt; &lt;button type="action" name="act_ship_floor_2" &gt;Floor 2&lt;/button&gt; &lt;button type="action" name="act_ship_floor_3" &gt;Floor 3&lt;/button&gt; &lt;button type="action" name="act_ship_floor_4" &gt;Floor 4&lt;/button&gt; &lt;button type="action" name="act_ship_floor_5" &gt;Floor 5&lt;/button&gt; &lt;/div&gt; &lt;div class="controls"&gt; &lt;!--controls--&gt; &lt;div class="ship-power"&gt; &lt;span&gt;Speed&lt;/span&gt; &lt;span&gt;O.O.C.&lt;/span&gt; &lt;span&gt;Helm&lt;/span&gt; &lt;span&gt;Guns&lt;/span&gt; &lt;span&gt;Shields&lt;/span&gt; &lt;input type="number" name="attr_ship_speed" max="6" min="0" value="0"/&gt; &lt;input type="number" name="attr_ship_ooc" max="4" min="0" value="0"/&gt; &lt;input type="number" name="attr_ship_helm" max="6" min="0" value="0"/&gt; &lt;input type="number" name="attr_ship_guns" max="6" min="0" value="0"/&gt; &lt;input type="number" name="attr_ship_shields" max="6" min="0" value="0"/&gt; &lt;/div&gt; &lt;div class="ship-floor-1"&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;/div&gt; &lt;div class="ship-floor-2"&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;/div&gt; &lt;div class="ship-floor-3"&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;/div&gt; &lt;div class="ship-floor-4"&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;/div&gt; &lt;div class="ship-floor-5"&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;span&gt;&amp;nbsp;&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;script type="text/worker"&gt; const buttonlist = ["ship_power","ship_floor_1","ship_floor_2","ship_floor_3","ship_floor_4","ship_floor_5"]; buttonlist.forEach(button =&gt; { on(`clicked:${button}`, function() { setAttrs({ sheetTab: button }); }); }); &lt;/script&gt; yes the &amp;nbsp; are supposed to be there for now .charsheet.ship-power, .charsheet.ship-floor-1, .charsheet.ship-floor-2, .charsheet.ship-floor-3, .charsheet.ship-floor-4, .charsheet.ship-floor-5 { display: none; } .charsheet.sheet-tabstoggle[value="ship_power"] ~ div.ship-power, .charsheet.sheet-tabstoggle[value="ship_floor_1"] ~ div.ship-floor-1, .charsheet.sheet-tabstoggle[value="ship_floor_2"] ~ div.ship-floor-2, .charsheet.sheet-tabstoggle[value="ship_floor_3"] ~ div.ship-floor-3, .charsheet.sheet-tabstoggle[value="ship_floor_4"] ~ div.ship-floor-4, .charsheet.sheet-tabstoggle[value="ship_floor_5"] ~ div.ship-floor-5 { display: block; } div.controls { display: grid; grid-template-columns: 700px; } div.ship-power, div.ship-floor-1, div.ship-floor-2, div.ship-floor-3, div.ship-floor-4, div.ship-floor-5 { border: 1pt solid white; } div.ship-power { background-image: url("<a href="https://i.imgur.com/vAF0Rt6.png" rel="nofollow">https://i.imgur.com/vAF0Rt6.png</a>"); height: 700px; width: 700px; background-repeat: no-repeat; background-size: cover; display: grid; grid-template-columns: repeat(5, 40px); column-gap: 5px; } div.ship-floor-1, div.ship-floor-2, div.ship-floor-3, div.ship-floor-4, div.ship-floor-5 { background-image: url("<a href="https://i.imgur.com/ez6Aliz.png" rel="nofollow">https://i.imgur.com/ez6Aliz.png</a>"); height: 700px; width: 700px; background-repeat: no-repeat; background-size: cover; display: grid; grid-template-columns: 29px repeat(7, 96px); grid-template-rows: 29px repeat(7, 96px); border-collapse: collapse; } div.ship-floor-1 span, div.ship-floor-2 span, div.ship-floor-3 span, div.ship-floor-4 span, div.ship-floor-5 span { border: 1px solid black; }

Scott C. said: And, then because I just noticed the question, what do you mean by a vertical slider bar? If you mean something like this codepen , the anser is unfortunately no (or at least range inputs don't seem to work reliably. The closest you can come is using one of the fill-to-left radio button tricks to fake it. faking is just as good, and I assume the slide pen is the blue bar below the code? (I'm not familiar with jargon yet), all I need right now is 5 bars, 4 of which are 0-6, one 0-4, all are whole numbers only

It's because you've moved the tabstoggle input out of the same container that holds your divs to be shown/hidden. the ~ &nbsp;is the sibling selector and only selects things that are at the same level as the item on the left of it (and in later lines of the html). You can either get more specific with your CSS to hide/show the divs: .charsheet.sheet-tabstoggle[value="ship_power"] ~ .controls div.ship-power or use the jquery method I outlined in my post as it won't care what the sibling relationships are.

Stormborn said: Scott C. said: And, then because I just noticed the question, what do you mean by a vertical slider bar? If you mean something like this codepen , the anser is unfortunately no (or at least range inputs don't seem to work reliably. The closest you can come is using one of the fill-to-left radio button tricks to fake it. faking is just as good, and I assume the slide pen is the blue bar below the code? (I'm not familiar with jargon yet), all I need right now is 5 bars, 4 of which are 0-6, one 0-4, all are whole numbers only Then you want something like what is demo'd here . Essentially you make a container to hold your radios and then style them as needed.

Scott C. said: It's because you've moved the tabstoggle input out of the same container that holds your divs to be shown/hidden. the ~ &nbsp;is the sibling selector and only selects things that are at the same level as the item on the left of it (and in later lines of the html). You can either get more specific with your CSS to hide/show the divs: .charsheet.sheet-tabstoggle[value="ship_power"] ~ .controls div.ship-power or use the jquery method I outlined in my post as it won't care what the sibling relationships are. okay I intergraded it, tabs work good the content shows, but the backgrounds images are gone figure out why &nbsp;that didn't work something wrong with my CSS .navigable-section:not(.active){ display:none !important; } .nav-button.active{ background-color:blue; } div.controls { display: grid; grid-template-columns: 700px; } div.navigable-section navigable-section--ship-power, div.navigable-section navigable-section--ship-floor-1, div.navigable-section navigable-section--ship-floor-2, div.navigable-section navigable-section--ship-floor-3, div.navigable-section navigable-section--ship-floor-4, div.navigable-section navigable-section--ship-floor-5 { border: 1pt solid white; } div.navigable-section navigable-section--ship-power { background-image: url("<a href="https://i.imgur.com/vAF0Rt6.png" rel="nofollow">https://i.imgur.com/vAF0Rt6.png</a>"); height: 700px; width: 700px; background-repeat: no-repeat; background-size: cover; display: grid; grid-template-columns: repeat(5, 40px); column-gap: 5px; } div.navigable-section navigable-section--ship-floor-1, div.navigable-section navigable-section--ship-floor-2, div.navigable-section navigable-section--ship-floor-3, div.navigable-section navigable-section--ship-floor-4, div.navigable-section navigable-section--ship-floor-5 { background-image: url("<a href="https://i.imgur.com/ez6Aliz.png" rel="nofollow">https://i.imgur.com/ez6Aliz.png</a>"); height: 700px; width: 700px; background-repeat: no-repeat; background-size: cover; display: grid; grid-template-columns: 29px repeat(7, 96px); grid-template-rows: 29px repeat(7, 96px); border-collapse: collapse; } div.navigable-section navigable-section--ship-floor-1 span, div.navigable-section navigable-section--ship-floor-2 span, div.navigable-section navigable-section--ship-floor-3 span, div.navigable-section navigable-section--ship-floor-4 span, div.navigable-section navigable-section--ship-floor-5 span { border: 1px solid black; }

Hmm, not sure why your background image isn't working, but I'd really recommend recreating those setups with CSS when you do your pseudo-sliders. It should be pretty doable with just CSS, additionally doing it via html and CSS instead of an image will let you make those headers for the sliders translatable.

Scott C. said: Hmm, not sure why your background image isn't working, but I'd really recommend recreating those setups with CSS when you do your pseudo-sliders. It should be pretty doable with just CSS, additionally doing it via html and CSS instead of an image will let you make those headers for the sliders translatable. I tried doing them in HTML and it was being a poo with vertical alignment, also if images are being a poo with tabs then I need to rethink this as the ship floors need to display images

Scott C. said: Hmm, not sure why your background image isn't working, but I'd really recommend recreating those setups with CSS when you do your pseudo-sliders. It should be pretty doable with just CSS, additionally doing it via html and CSS instead of an image will let you make those headers for the sliders translatable. okay from what I can see it's the fact that the below part is no longer keying correctly div.navigable-section navigable-section--ship-power i think the space is what's killing it okay this fixes the images but kills the tabs div.navigable-section-navigable-section--ship-power is there something I can put in the space that'll fix this? would nesting fix this? what about giving the div multipule classes like: class="navigable-section navigable-section--ship-power, ship-power" multiclassing worked how would I make it so Ship power is the default