problem with hiding div tags

**damian_d** · 08-04-2006, 10:37 AM

I've looked around for ways to use show and hide div tags, but I can't seem to get it to work. I'm posting the script I have that doesn't use javascript. I've also tried using javascript (document.getPropertyById('id').style.display = 'none'), also to no avail.

Can anyone see what I'm missing?

Here's a link to the page http://www.damianfiles.com/testingdiv.asp. I'm expecting the text box to not be there when the page loads, but then to show up when I click the top radio button, and then disappear when I click the bottom one.

For answers, please be as explicit as possible. Thanks!

Here's the code:

<html>
<head>
<title>Test</title>
<style>
.showdiv {display:block}
.hidediv {display:none}
</style>
</head>
<body>
<form action="board.asp" method="post" Name="frmForm">
<table>
<tr>
<td colspan="6">
board<br> 
</td>
</tr>
<tr>
<td>
 
</td>
<td>
<input type="radio" name="BoardType" value="1" onClick="indBoard.className='showdiv'">
</td>
<td colspan="4">
Independent.
</td>
</tr>
<div id="indBoard" class="hidediv">
<tr>
<td colspan="3">
 
</td>
<td>
<input type="text" name="PercentTime" size="4" maxlength="3">
</td>
<td colspan="2">
% of time
</td>
</tr>
</div>
<tr>
<td>
 
</td>
<td>
<input type="radio" name="BoardType" value="2" onClick="indBoard.className='hidediv'">
</td>
<td colspan="4">
City council.
</td>
</tr>
<tr>
<td align="right" colspan="6">
<input type="Submit" value="Submit" name="Submit">
</td>
</tr>
</table>
</FORM>
</body>
</html>

**gil davis** · 08-04-2006, 12:04 PM

I think the problem lies in the content of the DIV. The browser doen't seem to like having a table row inside it. However, if you put a whole table inside, you can do it.

Code:

<form onsubmit="return false">
<table border>
<tr>
<td><input type="radio" name="BoardType" 

onclick="document.getElementById('d1').style.display='block'"></td>
<td>Independent.</td>
</tr>
<tr><td colspan=2>
<div id="d1" style="display: none">
<table>
<tr>
<td><input type="text"></td>
<td>% of time</td>
</tr>
</table>
</div>
</td></tr>
<tr>
<td><input type="radio" name="BoardType" 

onclick="document.getElementById('d1').style.display='none'"></td>
<td>City council.</td>
</tr>
</table>
</form>

**damian_d** · 08-04-2006, 12:17 PM

Wow, that was certainly it. Thanks so much for your help. I didn't think div tags would be so picky. Ahh, so much to learn...

Thread: problem with hiding div tags

Thread Tools

Display

problem with hiding div tags

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions