Trying to use Javascript to hide/show several textboxes with checkbox onclick

[malibu65k]

I can Hide/Show the first set of fields but not the second set. I've search the internet to only find several examples of just showing hiding 1 text box. I've used the <div> tag before with the JavaScript toggle to show/hide while developing another site and it works great, but because of the way this site is written I'm restricted, otherwise it will end up being a major rewrite. I'm only making modifications to this site and I'm not familiar with this coding. Maybe someone else is more knowledgeable. I'd appreciate any help I can get. Thanks.


JavaScript...

<script language="JavaScript" type="text/javascript">

function toggleShowHide() {
if(document.getElementById("hideMe").style.display == "none")
document.getElementById("hideMe").style.display = "block";
else
document.getElementById("hideMe").style.display = "none";
if(document.getElementById("showMe").style.display == "block")
document.getElementById("showMe").style.display = "none";
else
document.getElementById("showMe").style.display = "block";
}
</script>



ColdFusion...

<td Class="LabelDarkRight"><cf_DB_Label ID="NEXT_VIP" BindTableName="#CURRENT_Table#"></td>

These 2 textboxes, hide or show on check and uncheck of the Change checkbox just below it with the above Function...

<td Class="DataLightLeft" style="display:block" ID="hideMe"><cf_DB_Label ID="hideMe"
BindTableName="#CURRENT_Table#" text="#DS_DATASET.NEXT_VIP #"></td>
<td Class="DataLightLeft" style="display:none" ID="showMe"><cf_DB_TextBox ID="NEXT_VIP "
BindTableName="#CURRENT_Table#" text="#DS_DATASET.NEXT_VIP #" ></cf_DB_TextBox></td>

<td class="LabelDarkRight" ><cf_DB_Label ID="Changed" Text = "Change?"></td>
<td bgcolor="#EEEEEE"><input type="checkbox" ID="Changed" Enabled="true" onClick ="toggleShowHide ()"></td>


<td class="LabelDarkRight"><cf_DB_Label ID="No_MONTHS" Text = "No of Months"></td>

These 2 do not hide/show...

<td class="DataLightLeft" style="display:block" ID="hideMe"><cf_DB_Label ID ="hideMe"
BindTableName="#CURRENT_Table#" text="#DS_DATASET.No_MONTHS#"></td>
<td class="DataLightLeft" style="display:none" ID="ShowMe"><cf_DB_TextBox ID="No_MONTHS"
BindTableName="#CURRENT_Table#" text="#DS_DATASET.No_MONTHS#" ></cf_DB_TextBox></td>

 

[ChrisHirst]

Just give all the elements you want to 'hide' the same class name and toggle the visibility property or the display property value for that class.

Hint: Elements can have more than one class name, and unlike element IDs, class names are usable with multiple element in the same document



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

getElementById will only ever return one singular element: the first one it finds matching the ID you are passing it since IDs must be unique. Your function will only ever toggle the first set.

You can use getElementsByClassName to get a collection of all the elements with a specified class. You would then need to cycle through them collection and apply the display change to each one.

http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech