A form will have multiple sets of radios buttons asking:
Did you perform this? Yes | NO
Did you perform that? Yes | NO
What about that other thing? Yes | No
For each question, if they select yes then there will be some additional information to be gathered for each one. That is where I would like to have the inputs dynamically show up. I would default these to collapsed on page load.
I have played around with changing the style.display property to "none" and "block", which essentially hides the content but the content below it does not move up.
Is there a way to accomplish this without manipulating every objects .top property?
Since every widget has a fixed (absolute) position given with the top/left values, hiding previous elements isn't going to move anything.
You might consider writing HTML code yourself. (This can be embedded in a Rich Display with the HTML container). This way you can make everything "flow" within the container.
You can't bind variables to a tag within an HTML container. And naming input tags the same as PUI variables will do nothing useful at all.
For data that's output from the program to the browser, you could use our ejs support.
You could also synchronize the data to hidden widgets using JavaScript -- that's probably the easiest. If you're driving this with an RPG program, you're going to need bound variables anyway, since you're going to want them in the DDS so that they're defined in the RPG program.