hide div

[ecannizzo]

I'm trying to hide a div using the following code, however the items within the div are not disappearing. I know the logic of the javascript is working. I don't get any errors. Can anyone tell me what's wrong? Thanks!

Javascript:

function OnChange(dropdown)
        {
	        var myindex  = dropdown.selectedIndex;
	        var SelValue = dropdown.options[myindex].value;  
	        
	        if (SelValue == "4" || SelValue == "12") 
	        {
	            alert("here");
	            document.getElementById('PanelPharm').style.visibility = 'visible';
	        }
	        else 
	        {
	            alert("here2");
	            document.getElementById('PanelPharm').style.visibility = 'hidden';
	        }        
            }

HTML:

<div id="PanelPharm">
		
                    <tr>
                        <td>
                            Pharm</td>
                        <td>
                            <select name="PharmChosen" id="PharmChosen">

		</select></td>
                    </tr>
                
	</div>

 

[okiiyama]

maybe try:

document.getElementById('PanelPharm').style.display = ""; //visible
document.getElementById('PanelPharm').style.display = "none"; //hidden

 

[ecannizzo]

Thanks, but it didn't work. Does it matter if it's in another div?

 

[okiiyama]

try the following:

<div id="PanelPharm" style="display: inline;">
...
</div>

I think this will work because now the DOM Structure contains "style" and the style attribute "display".

The same should apply to using "visibility" if you wanted to use visibility instead.

 

[tsuji]

The tr is contained in the tbody rather than the div. So you have to make the id to the tr rather than the apparent container div.
[tt]
<!-- <div id="PanelPharm"> -->
<tr [blue]id="PanelPharm"[/blue]>
<td>Pharm</td>
<td>
<select name="PharmChosen" id="PharmChosen">

</select>
</td>
</tr>
<!-- </div> -->
[/tt]