[SOLVED] show/hide sections of table when checkbox is ticked

pixelgirl · April 8, 2008

Hi, I am looking at an example (see code below) that will show/hide sections of code when a checkbox is ticked.

I cannot get the example to work with my code. Im probably doing something really stupid, but ive been trying to make it work for ages and I cant get anywhere.

Any help would be appreciated

example code:

<html>
 <head>
	<title>
	</title>
	<script> 
		function showMe (it, box) 
		{ var vis = (box.checked) ? "block" : "none"; 
		document.getElementById(it).style.display = vis; } 
	</script> 
</head> 
<body>
	 <input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox 
	<div id="div1" style="display:none"> 
		<h3 align="center"> This JavaScript shows how to hide divisions </h3> 
		<table border=1 id="t1">
			<tr> 
				<td>i am here!</td>
			</tr>
		</table> 
	</div>
	<form> 
	</form> 
</body>
</html>

the code above works.

my code:


	<script language="JavaScript">

	function showMe (it, box) {
  var vis = (box.checked) ? "block" : "none";
  document.getElementById(it).style.display = vis;
}

</script>
.
.
.
.
                                                        <tr>
						<td colspan = "2"><input type="checkbox" name="showHideBreeds" onclick="showMe('div1', this)"><p class="text3">All Breeds</p></td>
					        </tr>
					<div id="div1" style="display:none">

						<tr>
							<td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Akhal Teke"><p class="text3">Akhal Teke</p></td>

							<td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Andalusian"><p class="text3">Andalusian</p></td>

							<td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Anglo Arab"><p class="text3">Anglo Arab</p></td>
						</tr>
	                                         <tr>
							<td colspan = "2"><input type="checkbox" name="breeds[]" value = "Welsh Section D"><p class="text3">Welsh Section D</p></td>

							<td colspan = "2"><input type="checkbox" name="breeds[]" value = "Unknown"><p class="text3">Unknown</p></td>
						</tr>
                       </div>

if anyone can tell me where I am going wrong it would be greatly appreciated. I think the issue is that im trying to get the code to work within another table?

Cosizzle · April 8, 2008

Hmm worked for me ::)

<html>
 <head>
	<title>
	</title>		
	<script language="JavaScript">
		function showMe (it, box) {
  				var vis = (box.checked) ? "block" : "none";
  				document.getElementById(it).style.display = vis;
		}
	</script>
</head>
<body>
		<tr>
			<td colspan = "2"><input type="checkbox" name="showHideBreeds" onclick="showMe('div1', this)"><p class="text3">All Breeds</p></td>
		</tr>
					<div id="div1" style="display:none">

						<tr>
							<td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Akhal Teke"><p class="text3">Akhal Teke</p></td>

							<td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Andalusian"><p class="text3">Andalusian</p></td>

							<td colspan = "2"><input type="checkbox" hidden name="breeds[]" value = "Anglo Arab"><p class="text3">Anglo Arab</p></td>
						</tr>
	                                         <tr>
							<td colspan = "2"><input type="checkbox" name="breeds[]" value = "Welsh Section D"><p class="text3">Welsh Section D</p></td>

							<td colspan = "2"><input type="checkbox" name="breeds[]" value = "Unknown"><p class="text3">Unknown</p></td>
						</tr>
                       </div>

</body>
</html>

I added the HTML tags, and took away some of the '.' just below the <script> tag.

Hope that helped Best of luck!

pixelgirl · April 8, 2008

if i put the code you just posted in a different file it works for me too but still not in my original file.

Ok, looking at it again, it seems to be the table tags that are the problem. The code below doesnt work, but if you remove the table tags it does (for me anyway.)

I am using this code within a table so i need it to work within the table tags.

Can anyone give any suggestions?

<html>
 <head>
	<title>
	</title>		
	<script language="JavaScript">
		function showMe (it, box) {
  				var vis = (box.checked) ? "block" : "none";
  				document.getElementById(it).style.display = vis;
		}
	</script>
</head>
<body>
<table>
		<tr>
						<td width="100"> </td>
					</tr>
					<tr>
						<td><p class="text3"><b>Locations to include in search:</b></p></td>
					</tr>
					<tr>
						<td colspan = "2"><input type="checkbox" hidden name="locations[]" onclick="showMe('div1', this)" value = "All Locations"><p class="text3">All Locations</p></td>
					<div id="div2" style="display:none">					
						<td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "Greater London"><p class="text3">Greater London</p></td>

						<td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "South West England"><p class="text3">South West England</p></td>
					</tr>
					<tr>	
						<td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "South East England"><p class="text3">South East England</p></td>

						<td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "The Midlands"><p class="text3">The Midlands</p></td>

						<td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "North East England"><p class="text3">North East England</p></td>
					</tr>
					<tr>
						<td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "North West England"><p class="text3">North West England</p></td>

						<td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "East Anglia"><p class="text3">East Anglia</p></td>

						<td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "Scotland"><p class="text3">Scotland</p></td>
					</tr>
					<tr>
						<td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "Northern Ireland"><p class="text3">Northern Ireland</p></td>

						<td colspan = "2"><input type="checkbox" hidden name="locations[]" value = "Wales"><p class="text3">Wales</p></td>
					</tr>
						</div>
</table>
</body>
</html>

pixelgirl · April 8, 2008

OK, I have now got it working when the hidden bit is enclosed in a seperate table.

However, when the hidden bit is unhidden it does not appear below the checkbox to unhide it, but on the right of the rest of my code even though i have the property align="left" for both tables. If you put the below code in to a page and run it youll see what I mean.

This is really irritating as it looks very bad, so could anyone suggest any layout ideas which would make it appear in the correct area of my page?

Any help is appreciated

the code is:

<html>
<head>
<script language="JavaScript">
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
</script>
</head>

<body>
<form method="post" name="frmMatchMain" id="frmMatchMain">
				<table width="100" align="left" cellspacing = "7">
                                                 <tr>
						<td><p class="text3"><b>Locations to include in search:</b></p></td>
					</tr>
					<tr>
						<td colspan = "2"><input type="checkbox" checked = "true" onclick="javascript:ReverseDisplay('Location')" value = "AllLoc"><p class="text3">All Locations</p></td>
					</tr>
					</taBLE>
					</form>


					<div id = "Location" style="display: none;">
					<form method="post" name="frmMatchLocation" id="frmMatchLocation">
					<table width="100" align="left" cellspacing = "7">
					<tr>
						<td colspan = "2"><input type="checkbox" name="locations[]" value = "Greater London"><p class="text3">Greater London</p></td>

						<td colspan = "2"><input type="checkbox" name="locations[]" value = "South West England"><p class="text3">South West England</p></td>
					</tr>
					<tr>	
						<td colspan = "2"><input type="checkbox" name="locations[]" value = "South East England"><p class="text3">South East England</p></td>

						<td colspan = "2"><input type="checkbox" name="locations[]" value = "The Midlands"><p class="text3">The Midlands</p></td>

						<td colspan = "2"><input type="checkbox" name="locations[]" value = "North East England"><p class="text3">North East England</p></td>
					</tr>
					<tr>
						<td colspan = "2"><input type="checkbox" name="locations[]" value = "North West England"><p class="text3">North West England</p></td>

						<td colspan = "2"><input type="checkbox" name="locations[]" value = "East Anglia"><p class="text3">East Anglia</p></td>

						<td colspan = "2"><input type="checkbox" name="locations[]" value = "Scotland"><p class="text3">Scotland</p></td>
					</tr>
					<tr>
						<td colspan = "2"><input type="checkbox" name="locations[]" value = "Northern Ireland"><p class="text3">Northern Ireland</p></td>

						<td colspan = "2"><input type="checkbox" name="locations[]" value = "Wales"><p class="text3">Wales</p></td>

					</tr>
					</table>
					</form>
					</div>
<body>

pixelgirl · April 8, 2008

managed to get it fixed by nesting all the tables within a main table.

Cosizzle · April 8, 2008

Pixelgirl, before getting to carried away with tables and to save you from a few nightmares I suggest reading up on CSS. It will change the way you write websites forever... well until something better comes along ::) But in general practice most web developers will do almost anything to avoid using a table

Sign In

[SOLVED] show/hide sections of table when checkbox is ticked

Recommended Posts

pixelgirl

Link to comment

Share on other sites

Cosizzle

Link to comment

Share on other sites

pixelgirl

Link to comment

Share on other sites

pixelgirl

Link to comment

Share on other sites

pixelgirl

Link to comment

Share on other sites

Cosizzle

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information