Hide and show with checkbox

Hi Guys,

I want to control some form/column to show/hide with one checkbox, for example:

when the checkbox is unchecked then form/column A will hide and form/column B will be seen.

I have as similar as following

<style type="text/css">
#parentTable.vehicleOn .showOff, #parentTable.vehicleOff .showOn {
display: none;
}
</style>
<table id="parentTable" class="vehicleOff">
<tr><td><input type="checkbox" name="vehicle" value="N"
onclick="document.getElementById('parentTable').cl assName = this.checked
? 'vehicleOn' : 'VehicleOff'"/></td></tr>

<tr class="showOn"><td><input type="text" name="A" value="This is A" /></
td></tr>
<tr class="showOff"><td><input type="text" name="B" value="This is B" /></td></tr>
</table>

Code (markup):

With this code after checkbox checked/unchecked repeated that will shown Both A and B, that I want is only one show (A or B)

Anyone that can help to provide a link, pointers or examples?

I would appreciate it if you are willing to help and I am grateful

 

Here is the code.. one problem with your code is the section : 'VehicleOff' is wrong because CSS and Javascript is CaSe SeNsItIvE.. but not the only problem...
this should work:

<style type="text/css">
#parentTable.vehicleOff .showOff 
{
    display: block;
}
#parentTable.vehicleOff .showOn
{
    display: none;
}
#parentTable.vehicleOn .showOn 
{
    display: block;
}
#parentTable.vehicleOn .showOff 
{
    display: none;
}
</style>
<table id="parentTable" class="vehicleOff">
<tr><td><input type="checkbox" name="vehicle" value="N"
onclick="document.getElementById('parentTable').className = this.checked
? 'vehicleOn' : 'vehicleOff'"/></td></tr>

<tr class="showOn"><td><input type="text" name="A" value="This is A" /></
td></tr>
<tr class="showOff"><td><input type="text" name="B" value="This is B" /></td></tr>
</table>

Code (markup):

 

Hi camjohnson95,

Great, You are rock a hero, many thanks...

that one more.... after checkbox checked then A Hiding and B showing, but when I refresh the browser both are showing, there any idea that just B showing although browser refresh?

perhaps, set with initiate (sign) using checkbox name (as/or checked) can fix it.
e.g.

 
			<?php if ($vehicle) { ?>
			  <input type="checkbox" name="vehicle" value="1" checked="checked" onclick="sendSubmit(),document.getElementById('parentTable').className = this.checked ? 'vehicleOn' : 'vehicleOff'" /><label for="vehicle">Vehicle</label>

              <?php } else { ?>
              <input type="checkbox" name="agree" value="1" onclick="sendSubmit(),document.getElementById('parentTable').className = this.checked ? 'vehicleOn' : 'vehicleOff'" /><label for="agree"><label for="vehicle">Vehicle</label>
              <?php } ?>

PHP:

even that code has checked(as vehicle) but seem that A and B both are showing after refreshed, could You or someone else please help me how to set the conditional with initiate?

Greetings