Jump to content

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


Recommended Posts

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?

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  :D Best of luck!

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>

 

 

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 :D

 

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, 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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.