Question

I found another similar questios, but almost all is for advanced things, like Android development. My question is simple, I think. I have this two codes:

function toggle(d)
{
    var o=document.getElementById(d);
    o.style.display=(o.style.display=='none')?'block':'none';
}

And in another file, I got that:

<a href="javascript:;" onmouseover="toggle('maisinfo');">More Info </a>

When I click on got the mouseover (second code), it just work after second try.

Anyone know where is the problem?

Obs.: The first code is in the header.php and the second on single.php (WORDPRESS)

Answer 1

The first time, d is set by CSS; JavaScript doesn’t see that style property (See Get the Rendered Style). It initially sees o.style.display === "" (which is not ‘none’). Consequently, the first click sets it to none and the second sets it to block.

Change it to:

o.style.display = (o.style.display === 'block') ? 'none':'block';