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

[Jono]

On 8/17/04 5:24 PM, "Jono" <ox4dboy at comcast.net> wrote:
> 
[snip]
> 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.
[/snip]

I have found a lot of examples on Google with "Javascript + Show Hide with
checkbox"

Picking the best option is tough, and most of these are not specific to what
I am trying to do.  What I did find (below) seems like it will work, but it
appears to hide the items entirely instead of just changing the styles from
"dim" to "dark" as I would like to do.  I suppose that hiding and showing
the content is OK, I just wanted to "dim" to "dark" thing to work.


The easiest so far is this:
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
 First you'll need an onClick event handler in the checkbox, like this:

<INPUT TYPE="CHECKBOX" NAME="switchBox"
onClick="showHideText(this,'myText')">

    Next you'll need a DIV that contains the text you want to show/hide,
like this:

<DIV ID="myText">Put text here</DIV>

Then you'll need the JavaScript function to hide the text, like this:

function showHideText(boxName,divName) {
    if(boxName.checked = true) {
        showObject(divName);
        }
    else {
        hideObject(divName);
        }
    }

    Finally you'll need your showObject and hideObject functions.  I like to
use the ones at www.dansteinman.com/dynduo ; they're easy to implement and
they work well for Netscape and Explorer.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><><