Showing/Hiding div

Question

I am using asp.net ajax control toolkit 1.0 on vs 2005. I am using the collapseablePanel and AlwaysVisibleControlExtender control. When I use these, I notice that it my panel flashes for a few seconds before it is hidden.

To avoid this, I have decided to place it in a div to make it hidden. I want it shown when I use the control.

Here is what I have:

<div id="menuContent" style="display:none">

 <asp:Panel ID="pnlAddNewContent" runat="server" Width="300px">
   ....//the panel stuff here
 </asp>
</div>

and the javascript for this in the header is:

    function showdiv() { 
    if (document.getElementbyId) {
        document.getElementbyId('menuContent').style.visibility = 'visible'; 
    } 

    }

(its for IE 6 for I don't care about compatability)

and body onload=onLoad="showdiv();"

It correctly hides upon load, but I cannot get it to show again. Does anyone have solutions?

Answer 1

You are trying to show it by setting the visibility but you hid it using display.

You actually want something like this:

document.getElementbyId('menuContent').style.display = 'block';

Answer 2

Maybe this is what you're looking for

Javascript function:

function showHide(descriptor) 
{    
 var layer = document.getElementById(descriptor);
 if (layer != null) {
  if (layer.style.display != 'none') {
   layer.style.display = 'none'; //hide layer    
  } else {
   layer.style.display = 'block';//show layer
  }  
 }
}

HTML:

<a href="javascript:showHide('divInfo');"><img id="imgInfo" src="info.gif" border="0" /></a>
<div style="display: none;" id="divInfo">some info</div>

Answer 3

Basically had to use Visibility hidden and visible attributes as these work best on a collapsePanel