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

Hide Div based on numeric input.

How can I hide rows in a div tag base off the row number being less than or equal to a numeric value in an input. So for example, if I enter that I have 5 ranks in Earth Spells I want to display 5 spell rows for spell levels 1 trough 5.
1631773103

Edited 1631773117
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
This is going to depend on what limits there are on the numbers, but the basic pure HTML/CSS technique is to use a duplicate of the attribute that is type='hidden' : <input type='number' name='attr_level' value='0'> <input type='hidden' class='display-control' name='attr_level' value='0'> <div class='spell level-1'></div> <div class='spell level-2'></div> <div class='spell level-3'></div> <div class='spell level-4'></div> <div class='spell level-5'></div> .spell{ display: none; width: 100px; height: 50px; background-color: black; margin-bottom: 5px; } .display-control[value='1'] ~ .spell.level-1, .display-control[value='2'] ~ .spell.level-1, .display-control[value='2'] ~ .spell.level-2, .display-control[value='3'] ~ .spell.level-1, .display-control[value='3'] ~ .spell.level-2, .display-control[value='3'] ~ .spell.level-3, .display-control[value='4'] ~ .spell.level-1, .display-control[value='4'] ~ .spell.level-2, .display-control[value='4'] ~ .spell.level-3, .display-control[value='4'] ~ .spell.level-4, .display-control[value='5'] ~ .spell.level-1, .display-control[value='5'] ~ .spell.level-2, .display-control[value='5'] ~ .spell.level-3, .display-control[value='5'] ~ .spell.level-4, .display-control[value='5'] ~ .spell.level-5{ display: block; } Now, that's obviously a lot of CSS, and gets unreasonable very quickly. A better choice is probably to make your spells a repeating section and use a sheetworker to create/delete rows as needed based on the value of the controlling attribute.
1631773697
GiGs
Pro
Sheet Author
API Scripter
Scott C. said: Now, that's obviously a lot of CSS, and gets unreasonable very quickly. A better choice is probably to make your spells a repeating section and use a sheetworker to create/delete rows as needed based on the value of the controlling attribute. Or of course use a sheet worker that sets the value of a hidden attribute to 0 or 1, and use that to control visibility. This can simplify the CSS a lot, but you will end up with more hidden attributes as you need a separate one for each area that is going to be visible or not.
1631797689

Edited 1631798470
Pantsworth
Sheet Author
GiGs said: Scott C. said: Now, that's obviously a lot of CSS, and gets unreasonable very quickly. A better choice is probably to make your spells a repeating section and use a sheetworker to create/delete rows as needed based on the value of the controlling attribute. Or of course use a sheet worker that sets the value of a hidden attribute to 0 or 1, and use that to control visibility. This can simplify the CSS a lot, but you will end up with more hidden attributes as you need a separate one for each area that is going to be visible or not. Each list can have up to 26 spells starting at one spell for every level 1-20 then every 5 levels thereafter up to level 50. I have all the possible levels in an array, so I can leverage a loop to go through all the possible spell levels in a sheetworker. So my spells section is already in a repeating section.  I have the lists themselves set up in a repeating section - you don't have access to a  spell list until you buy at least 1 rank in it, and you only get the spells on that list up to the number of ranks you have bought.  Since you can't nest repeating sections.....  This is how I decided to handle it.  That said - since we are in a repeating section, and the list ranks are different for each section (ie the number of spells to show will differ for each list) - does this change if such a thing is possible, or how to handle the css?  Or I am also open to better management solutions that I may not have considered.