Expert: Andrew Hoffman - 7/26/2007

Question
Dear Andrew,

I tried some scripts visible/hidden, diplay/none with div and table, but it work only in ie. In other browers my top menu (also in javascripts) doesn't show and my page layout is destroy...

Do you have andy suggestion for my calendar I am working on. I would like to make appear a description on click for some of the activity. See an exemple on my page: http://www.iqdho.com/neo/francais/activites.html and click on the link in the yellow cell... (Sorry it is only in French for the moment).

Can you help me with that?

Thanking you in advance for your prompt attention.

Answer
function show()
{
if (table.style.display=="none")
{
table.style.display="";
}
else
{
table.style.display="none";
}

Here, you are not referring to an 'id' value of any kind--that's why nothing is happening when you click the link.  Also, you seem to want to toggle the table div between visible and invisible.  However, in your logic, you don't really say that.  What we want to say is, "If the div with id 'table' is invisible, show it.  Otherwise, if the table is already visible, hide it.  Try:

function show()
{
// obtain reference to the id 'table'
var id = document.getElementById("table");
// if div display is hidden or unset, show it
if (id.style.display=="none" || id.style.display=="")
{
id.style.display="block";
}
else if (id.style.display=="block")
{ // if it's already shown, hide it
id.style.display="none";
}

}

Also, add a 'return false' in your function call.  That will keep the '#' from jumping us to the top of the page.

onclick="show()"

should be:

onclick="show(); return false"

--

Best of luck,
Andrew