Trying to get up multiple sheet formants via drop down menu

Howdy! I feel like what I'm doing is biting off a little more than I can chew. I'd like to swap between a few basic types of character sheets using a drop-down menu, I think I've seen some 5e sheets do this but I'm not sure.  Here is an example of one format I'm going to try and recreate (Probably just use text boxes and pixel location). I want them to be able to swap from those to one like this   This is what I have for my code so far but I can't figure out how to display different things based on the attribute or drop-down options <!-- Here is the selection of sheet type --> <select id="attr_sheet_type" name="attr_sheet_type">     <option value="null">Choose One</option>     <option value="titan">Titan</option>     <option value="inf">vehicles and infantry</option>     <option value="player">Player</option> </select> <br> <!-- Here is the code for a null sheet -->

Hi Jake, absolutely possible. Have a look through the examples on the wiki: <a href="https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas</a> There's an example using a dropdown and css similar to your code.&nbsp; I would personally recommend the tabs method but they are essentially doing the same thing.

vÍnce said: Hi Jake, absolutely possible. Have a look through the examples on the wiki: <a href="https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas</a> There's an example using a dropdown and css similar to your code.&nbsp; I would personally recommend the tabs method but they are essentially doing the same thing. thanks, ill check it out and update on progress

Im sorry, im still having issues, even after directly copy and pasting the code just doesn't seem to work

Post a bare minimum example of your latest html and css so that we can see what you are working with. ie just your navigational element and the parent element (outermost/wrapper) of the sub-sections you want to hide/show.

html\/ &lt;!-- Here will be all the variable and library refences. we will see if they are filled at all --&gt; &lt;!-- Here is the selection of sheet type --&gt; &lt;div&gt; &nbsp; &nbsp; &lt;select name="attr_sheet_type" class="sheet_type"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;option value="null"&gt;Choose One&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;option value="titan"&gt;Titan&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;option value="inf"&gt;Vehicles and Infantry&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;option value="player"&gt;Player&lt;/option&gt; &nbsp; &nbsp; &lt;/select&gt; &lt;/div&gt; &lt;br&gt;&nbsp; &lt;!-- im not sure what this dose --&gt; &lt;!-- Here is the code for a null sheet --&gt; &lt;!-- Here is the code for a Titan sheet --&gt; &nbsp; &nbsp; &lt;div class="sheet-titan"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;Titan&lt;/h2&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;titan Stuff Goes here &lt;/span&gt; &nbsp; &nbsp; &lt;/div&gt; &lt;!-- Here is the code for a vehicles and infantr sheet --&gt; &lt;!-- Here is the code for a Player sheet --&gt; &lt;/div&gt; /* By deafult, hides all Stats*/ .sheet_stas .sheet-null, .sheet_stas .sheet-titan, .sheet_stas .sheet-inf, .sheet_stas .sheet-player, { &nbsp; &nbsp; display: block; } css\/ /* show the selected tab */ .sheet_stas .sheet_type[value="null"] ~ div.sheet-null .sheet_stas .sheet_type[value="titan"] ~ div.sheet-titan .sheet_stas .sheet_type[value="inf"] ~ div.sheet-inf .sheet_stas .sheet_type[value="player"] ~ div.sheet-player { &nbsp; &nbsp; display: none; }

It looks like you have messed up your code, but there might be enough there to reveal the issue. In the CSS, you need a comma at the end of each line, like this: .sheet_stas .sheet_type[value="null"] ~ div.sheet-null, .sheet_stas .sheet_type[value="titan"] ~ div.sheet-titan, .sheet_stas .sheet_type[value="inf"] ~ div.sheet-inf. .sheet_stas .sheet_type[value="player"] ~ div.sheet-player { &nbsp; &nbsp; display: none; } You also need a hidden input outside the div that contains your select, with the same name and default value, like so &lt;input type="hidden" name="attr_sheet_type" class="sheet_type"&gt; It's the class on that hidden input that i used in the CSS - it's irrelevant what class the select has.

Progress, but now we have an issue where it doesn't show up when selected &lt;!-- Here will be all the variable and library refences. we will see if they are filled at all --&gt; &lt;!-- Here is the selection of sheet type --&gt; &lt;input type="hidden" name="attr_sheet_type" class="sheet_type"&gt; &lt;div&gt; &nbsp; &nbsp; &lt;select name="attr_sheet_type" class="sheet_type"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;option value="null"&gt;Choose One&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;option value="titan"&gt;Titan&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;option value="inf"&gt;Vehicles and Infantry&lt;/option&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;option value="player"&gt;Player&lt;/option&gt; &nbsp; &nbsp; &lt;/select&gt; &lt;/div&gt; &lt;br&gt;&nbsp; &lt;!-- im not sure what this dose --&gt; &lt;!-- Here is the code for a null sheet --&gt; &lt;!-- Here is the code for a Titan sheet --&gt; &nbsp; &nbsp; &lt;div class="sheet-titan"&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;h2&gt;Titan&lt;/h2&gt; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span&gt;titan Stuff Goes here &lt;/span&gt; &nbsp; &nbsp; &lt;/div&gt; &lt;!-- Here is the code for a vehicles and infantr sheet --&gt; &lt;!-- Here is the code for a Player sheet --&gt; &lt;/div&gt; /* By deafult, shows all Stats*/ .charsheet .sheet-null, .charsheet .sheet-titan, .charsheet .sheet-inf, .charsheet .sheet-player, { &nbsp; &nbsp; display: none; } /* show the selected stat */ .sheet_stas .sheet_type[value="null"] ~ div.sheet-null,&nbsp; .sheet_stas .sheet_type[value="titan"] ~ div.sheet-titan,&nbsp; .sheet_stas .sheet_type[value="inf"] ~ div.sheet-inf,&nbsp; .sheet_stas .sheet_type[value="player"] ~ div.sheet-player, { &nbsp; &nbsp; display: block; }

What GiGs said.&nbsp; Also include a hidden input with the select so that the css can use that.&nbsp; Try this (I also kept all your class names as "sheet-" vs "sheet_"); &lt;div class="sheet-stas"&gt; &lt;select name="attr_sheet_type" class="sheet-type"&gt; &lt;option value="null" selected&gt;Choose One&lt;/option&gt; &lt;option value="titan"&gt;Titan&lt;/option&gt; &lt;option value="inf"&gt;Vehicles and Infantry&lt;/option&gt; &lt;option value="player"&gt;Player&lt;/option&gt; &lt;/select&gt; &lt;input type="hidden" name="attr_sheet_type" class="sheet-type" value="" /&gt; &lt;br&gt; &lt;div class="sheet-null"&gt; &lt;h2&gt;Choose a Sheet Type&lt;/h2&gt; &lt;/div&gt; &lt;div class="sheet-titan"&gt; &lt;h2&gt;Titan&lt;/h2&gt; &lt;span&gt;titan Stuff Goes here &lt;/span&gt; &lt;/div&gt; &lt;div class="sheet-inf"&gt; &lt;h2&gt;Vehicles and Infantry&lt;/h2&gt; &lt;span&gt;stuff&lt;/span&gt; &lt;/div&gt; &lt;div class="sheet-player"&gt; &lt;h2&gt;Player&lt;/h2&gt; &lt;span&gt;stuff&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; /* By deafult, hides all Stats*/ .sheet-stas .sheet-null, .sheet-stas .sheet-titan, .sheet-stas .sheet-inf, .sheet-stas .sheet-player { display: none; } /* show the selected tab */ .sheet-stas .sheet-type[value="null"] ~ .sheet-null, .sheet-stas .sheet-type[value="titan"] ~ .sheet-titan, .sheet-stas .sheet-type[value="inf"] ~ .sheet-inf, .sheet-stas .sheet-type[value="player"] ~ .sheet-player { display: block; }

vÍnce said: What GiGs said.&nbsp; Also include a hidden input with the select so that the css can use that.&nbsp; Try this (I also kept all your class names as "sheet-" vs "sheet_"); &lt;div class="sheet-stas"&gt; &lt;select name="attr_sheet_type" class="sheet-type"&gt; &lt;option value="null" selected&gt;Choose One&lt;/option&gt; &lt;option value="titan"&gt;Titan&lt;/option&gt; &lt;option value="inf"&gt;Vehicles and Infantry&lt;/option&gt; &lt;option value="player"&gt;Player&lt;/option&gt; &lt;/select&gt; &lt;input type="hidden" name="attr_sheet_type" class="sheet-type" value="" /&gt; &lt;br&gt; &lt;div class="sheet-null"&gt; &lt;h2&gt;Choose a Sheet Type&lt;/h2&gt; &lt;/div&gt; &lt;div class="sheet-titan"&gt; &lt;h2&gt;Titan&lt;/h2&gt; &lt;span&gt;titan Stuff Goes here &lt;/span&gt; &lt;/div&gt; &lt;div class="sheet-inf"&gt; &lt;h2&gt;Vehicles and Infantry&lt;/h2&gt; &lt;span&gt;stuff&lt;/span&gt; &lt;/div&gt; &lt;div class="sheet-player"&gt; &lt;h2&gt;Player&lt;/h2&gt; &lt;span&gt;stuff&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; /* By deafult, hides all Stats*/ .sheet-stas .sheet-null, .sheet-stas .sheet-titan, .sheet-stas .sheet-inf, .sheet-stas .sheet-player { display: none; } /* show the selected tab */ .sheet-stas .sheet-type[value="null"] ~ .sheet-null, .sheet-stas .sheet-type[value="titan"] ~ .sheet-titan, .sheet-stas .sheet-type[value="inf"] ~ .sheet-inf, .sheet-stas .sheet-type[value="player"] ~ .sheet-player { display: block; } No luck, everything broke down :(. Also that .sheet-stasts is an error, its meant to be .charsheet becuease (as far as I can tell) that's the library it's pulling from

Sorry.&nbsp; My code example works in isolation...&nbsp; You should be able to modify as needed. .sheet-stas is just a wrapper in my example.&nbsp; You can change that to whatever encapsulates your code.

even then it still doesn't seem to work. Further experimenting with the example code from <a href="https://wiki.roll20.net/Character_Sheet_Development/CSS#Dropdown" rel="nofollow">https://wiki.roll20.net/Character_Sheet_Development/CSS#Dropdown</a> , that doesn't seem to work either. Speaking with other coders they don't think it's possible without the use of Java script

You should be able to use my code as an example to follow.&nbsp; It does work in my test, but it's the only code.&nbsp; Proof of concept. If you do not have your code wrapped in .sheet-stas, just remove that from the css.

Do not rely on the preview tab.&nbsp; Always save and check in your game.&nbsp; The preview is notoriously incorrect. Also, I don't believe the preview tab has access to attribute data and/or sheetworkers, so if you are doing anything that depends on attributes it's very likely that it would not work in the preview tab. I would also highly recommend using the sandbox vs custom. Load the sandbox in chrome and use Scott's awesome browser extension to see live updates as you make changes locally (ie vscode or whatever editor you prefer) Much faster process. <a href="https://chromewebstore.google.com/detail/roll20-api-and-sheet-auto/hboggmcfmaakkifgifjbccnpfmnegick" rel="nofollow">https://chromewebstore.google.com/detail/roll20-api-and-sheet-auto/hboggmcfmaakkifgifjbccnpfmnegick</a>

okay, awesome! Just loaded it in game and it works.&nbsp; I'll check out sandbox after work. thank you very much!