Complex forms with lots of fields can be a real pain for users. Here we will outline a simple way to deal with this situation using CSS and jQuery.

If some of the options only have real meaning when a particular condition is met (like, for example, they depend on another form option’s value), things can be simplified by hiding unnecessary fields at runtime.

This is nothing new and is traditionally handled using jQuery to hide/show the form fields, however the drawback of this is that you’re generally forced to alter javascript code when adding or removing the options.

Here we will explore an alternative solution which uses CSS rules to handle the hide/show work and only requires a minimal amount of code......... (demo and download via the link)