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

[CSS Help] Show/Hide based on input value

1418641552
Finderski
Pro
Sheet Author
Compendium Curator
I'm working on showing/hiding content based on the value of a drop down. I know I can do with with a checkbox, unfortunately, the checkbox method breaks down in a repeating section (I want a single entry to affect the entire sheet, so I started using a checkbox that was visible at the top of the sheet and hiding that same check box at various points on the sheet itself to hide various things--it worked great until repeating sections). So, then I thought if there was a way to keep that value in a repeating section I could do that, but unfortunately, calculated fields only work with numbers (and a checkbox is On or 0), so that never worked. That was when I came up with the idea of a drop down where I can set values of 1 (on) and 0 (off), and then I could have an input field that points to the value of that selection. Here's the CSS I attempted but it didn't work: input.sheet-NewDieType[value^="1"] + *.sheet-dtypedropdown { display:inline-block; } I got the idea for doing the value like that from the way tabs work, but apparently it doesn't translate here. :) Is there any way to get this to work? Thanks.
1418660058
Lithl
Pro
Sheet Author
API Scripter
Set the value attribute of your checkbox to 1, and you'll get 1/0 rather than On/0. The CSS attribute selector is only going to look at the what's hardcoded into the HTML, not what the attribute's current value is.
1418667249

Edited 1418667310
Finderski
Pro
Sheet Author
Compendium Curator
Thanks Brian, I appreciate you helping. I did try setting the checkbox value = 1 and that did't seem to work, but I'll try it again. Maybe I was doing something wrong. Altough, even if that works, it makes me think that it still won't work with a repeating section, right? Because in the non-repeating sections, the controlling checkbox is repicated to the the areas I want to hide/show based on that checkbox, but in a repeating section, the name is going to change and won't synch up any longer, so option 2 would still get me, because my calculated field won't work, since it has to be a number field and not a checkbox, right?
1418672593

Edited 1418672704
Lithl
Pro
Sheet Author
API Scripter
You can use a checkbox show/hide within a repeating section; it'll have to be either a single checkbox outside the section toggling all of the show/hides at once within the sections, or a checkbox in each repeating section item toggling elements only within that repeating section item. For example: <input type="checkbox" class="check-toggle" name="attr_toggle" value="1" /> <fieldset class="repeating_example"> <div>Always visible</div> <div class="example-toggle">Sometimes visible</div> </fieldset> .example-toggle { display: none; } .check-toggle:checked ~ [data-groupname=repeating_example] > .repitem .example-toggle { display: block; } versus: <fieldset class="repeating_example"> <input type="checkbox" class="check-toggle" name="attr_toggle" value="1" /> <div>Always visible</div> <div class="example-toggle">Sometimes visible</div> </fieldset> .example-toggle { display: none; } .check-toggle:checked ~ .example-toggle { display: block; } The former would show all of the copies of "Sometimes visible" when you check the single checkbox. The latter would have multiple checkboxes, each displaying a single instance of "Sometimes visible" when checked.
1418674025
Finderski
Pro
Sheet Author
Compendium Curator
Cool. Thanks. I'll give it a whirl and see what happens. :)
1418701359
Finderski
Pro
Sheet Author
Compendium Curator
Brian - you're awesome. That did exactly what I wanted it to do!