Switching a simple dice roller button for an API button

I'm updating an older character sheet and porting a bunch of the stuff over into a newer format, and on my old sheet, when I ticked a box at the top of the sheet, it "switched" the visible button from the simple version of the dice roller to the API version. In moving things over, I appear to have broken something. and now I'm only seeing the simple dice roller button. While I could try and pick things apart to resolve it, I suspect there may be a cleaner way to do this beyond what was used before - but I haven't managed to find a good example of one. Does anyone have any tips, or some examples I can be pointed at? Cheers Chris

You can have two buttons (normal and api) then use css based on a checkbox to hide/show the appropriate button. good example on the wiki; <a href="https://wiki.roll20.net/CSS_Wizardry#Swap_Visible_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Swap_Visible_Areas</a> example; &lt;div&gt; &lt;span&gt;Use API:&lt;/span&gt; &lt;input type="checkbox" class="sheet-block-switch" name="attr_block_switch" value="1"&gt; &lt;button type="roll" name="roll_something" class="sheet-block-a" value="[[1d20 + @{selected|melee-mod}]]"&gt;Roll&lt;/button&gt; &lt;button type="roll" name="roll_something_api" class="sheet-block-b" value="!script {{ --#title| Melee Attack --=Roll|1d20 + @{selected|melee-mod} --*GMLine|@{selected|token_name} rolled a [$Roll]}}"&gt;API &lt;/button&gt; &lt;/div&gt; .charsheet .sheet-block-a, .charsheet .sheet-block-switch:checked ~ .sheet-block-b { display: block; } .charsheet .sheet-block-b, .charsheet .sheet-block-switch:checked ~ .sheet-block-a { display: none; }

Thanks for that - appreciated. Unfortunately, I'm still seeing both buttons appear on my screen &lt;button class="sheet-block-b" title="Rolls Athletics" type='roll' name='roll_athleticsApi' value='!some text'&gt;&lt;/button&gt; &lt;button class="sheet-block-a" type="roll" title="Non-API Athletics Roll" value="&amp;{template:stuff} {{name=@{character_name}}}&nbsp; {{Rollname=Athletics}} {{NormalSuccesses=a bunch of text }}" name="roll_athleticsInlineDice"&gt;&lt;/button&gt; Everything else - the API toggle, the CSS, is identical to your post - what have I missed?

ou also have the hidden input, correct? I was missing ".charsheet" in the first line of the css (I've updated the example), but that shouldn't have really caused an issue. You might post an example of your code, since the css might need to be adjusted depending on how your html written. I added your two buttons as well and it works in my test; .charsheet .sheet-block-a, .charsheet .sheet-block-switch:checked ~ .sheet-block-b { display: block; } .charsheet .sheet-block-b, .charsheet .sheet-block-switch:checked ~ .sheet-block-a { display: none; } &lt;div&gt; &lt;span&gt;Use API:&lt;/span&gt; &lt;input type="checkbox" class="sheet-block-switch" name="attr_block_switch" value="1"&gt; &lt;button type="roll" name="roll_something" class="sheet-block-a" value="[[1d20 + @{selected|melee-mod}]]"&gt;Roll&lt;/button&gt; &lt;button type="roll" name="roll_something_api" class="sheet-block-b" value="!script {{ --#title| Melee Attack --=Roll|1d20 + @{selected|melee-mod} --*GMLine|@{selected|token_name} rolled a [$Roll]}}"&gt;API &lt;/button&gt; &lt;button class="sheet-block-b" title="Rolls Athletics" type='roll' name='roll_athleticsApi' value='!some text'&gt;API&lt;/button&gt; &lt;button class="sheet-block-a" type="roll" title="Non-API Athletics Roll" value="&amp;{template:stuff} {{name=@{character_name}}} {{Rollname=Athletics}} {{NormalSuccesses=a bunch of text}}" name="roll_athleticsInlineDice"&gt;Roll&lt;/button&gt; &lt;/div&gt;

Thanks for the reply No, i don't have a Hidden input, and while I know what they are, I'm not sure where i'd put these in here (apologies - baby didn't sleep last night, so I didn't sleep last night). I've looked over my other sheets and tried some things, but that hasn't worked. What should this look like? Cheers Chris

Actually... I said hidden input, but it's really just the checkbox that is used for the toggle in the example. &lt;input type="checkbox" class="sheet-block-switch" name="attr_block_switch" value="1"&gt; Sometimes you have to use hidden inputs (it's just a copy of the checkbox toggle, but it is hidden from view ie display:none; ) Think, sheet "Settings" page. One area that controls the entire sheet... You can strategically place them in various parts of the sheet so that whatever you are trying to do on the sheet can happen in multiple sections.&nbsp; It really just depends on the html hierarchy and your css rule to "touch" them. The css portion of the example above assumes that your toggle checkbox is located as a sibling ie '~' of the buttons.&nbsp; It sounds like you either need to move your toggle to be a sibling (same level as your buttons), adjust your css to drill down to the actual location of your buttons, and/or use a hidden copy of the toggle checkbox to be a sibling of your button.&nbsp; Clear as mud? ;-)

Yeah, i had the checkbox input on my sheet. I removed all my code and just worked with the snippet you provided, and as you said, that worked fine - but i've got all those elements present within my sheet, so i suppose it must boil down to your last point. I tried moving my checkbox to be part of the main character sheet div (as opposed to being at the tabs level), but i still don't see a change of behavior when i change the button. Regardless of where the checkbox is, i am only seeing the non API button displayed on the sheet, so it does at least appear to be hinding my API button, but it isn't revealing it on my change

You might need to post your code(link...) in order to work out the css selectors correctly.&nbsp; Feel free to DM if needed. Cheers