One of the thing I like to do when creating HTML forms is to hide the input fields of features that users have not yet selected. It reduces the clutter on the screen, makes it easier for users to navigate the settings page, and for them to tell which features are currently enabled.
Typically, this is done by using a snippet of Javascript attached to the onclick attribute of a checkbox or radio button. When clicked, the code changes the CSS display property of the hidden fields from none to block (or inline):
<input type="checkbox" name="enable-scroll"
onclick="toggleDisplay('scroll-left');
toggleDisplay('scroll-right')"/>
toggleDisplay is the following Javascript function:
function toggleDisplay(id) {
var el = document.getElementById(id);
if (el.style.display == 'block') {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}
This works very well, but there are two problems. First, it’s a pain to have to scatter snippets of Javascript throughout the form–even if it’s only to call a function. Second, you still have to add more code to initialize the visibility of the fields when the page is load.
Fortunately, there is a good solution to these problems–use the Javascript framework, JQuery.
