A powerful UI technique is to hide and show elements to the user as needed.
Any individual elements can be hidden or shown by
calling the "
hide()" or "
But instead of hiding and showing various blocks of elements individually, in many cases it is much simpler to put them inside DIV tags, and then to hide/show entire DIVs.
Using this technique, even an entire web application can be placed on a single HTML page without requiring any navigation -- instead of navigation, just show the DIV containing the next block of input!
We have a very rudimentary application involving Name, Address, a Message and a Summary page.
The exercise in this page is to pack them in a single
Though one may not want to pack an entire application in one page for aesthetics and/or manageability reasons, the choice is there! And this exercise will show you the capabilities available.
Note that the
AutoSessionData continues to work.
includestatement in it. Add four DIV elements in it, with ids "nameDiv", "addrDiv", "messageDiv" and "summaryDiv". In these DIVs, copy the HTML forms and tables from the earlier Name.html, Address.html, Message.html and Summary.html files, but not the "Reset" or "Next" buttons.
style="display: none;"to start them off hidden at first.
|Next Step: Adding New Elements and Moving Existing Elements|