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.

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.

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.

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.