[thelist] Javascript + CSS Magic to "reveal" form field

[Jono]

I have a checkbox that, when clicked, will alter the style of a few elements
so that they will go from being "dim" to being "dark"  Below is a sketch of
what I an trying to do:



----------------------<tr1>------------------------
­­­
| |  Check to reveal the text field and label below
­­­
----------------------<tr2>------------------------
                 ­­­­­­­­­­­­­­­­­­­­­­­­­­­­
Text field label |       Text Field         |
                 ­­­­­­­­­­­­­­­­­­­­­­­­­­­­
----------------------<tr3>------------------------


When the user clicks the checkbox for "Click to reveal the element below"
the label and text field in the second table row (tr2) will appear.



.dim input {                /* style applied to the dim text field */
    background: #fff;       /* and text field label before the user */
    color: #fff;            /* clicks the checkbox */
    border: 1px solid #ccc;
    }

.dark input {                /* style applied to the dark text field */
    background: #fff;        /* and text field label after the user */
    color: #ccc;             /* clicks the checkbox */
    border: 1px solid #ccc;
    }

In a nutshell, I need a check box to toggle the styles from "hidden" to
"shown"  for the text field and label.  I'd rather the label and text field
be grayed out by default/initially and then become dark after the checkbox
is clicked.

If this is not the best JS + CSS approach, can someone please steer me in
the right direction?

Thanks