Display : block / none

Bonjour,
J'utilise la fonction suivante pour rendre visible/invisible des blocks de "div" :

function toggleDisplay(id) { 

if (document.getElementById) {	if ("none"==document.getElementById(id).style.display) { montre(id);} else { cache(id);}} 
else if (document.all) {	if ("none"==document.all[id].style.display) { montre(id);} else { cache(id);}} 
else if (document.layers) {	if ("none"==document.layers[id].display) { montre(id);} else { cache(id);}}  
}

La première fois, il est necessaire de cliquer deux fois pour voir apparaître/disparaître ces blocks. Après, ça fonctionne normalement.
Quelqu'un peut-il m'expliquer pourquoi ?
Comment remédier à ce problème ?

Merci à tous.

Ta condition ne prend pas en compte l'eventuelle absence de définition de la propriété display :

d = document.getElementById(id).style.display;
if (d == "none" || d == undefined || d == "") { montre(id);} else { cache(id);}

Suite à ton MP sarl, je reviens donner quelques infos suplémentaires.

En effet, il est parfaitement possible d'avoir défini le statut de ton element via une feuille de style. Celui-ci est donc caché (display;none) ou visible (display:block)

Malheureusement, actuellement, aucun moteur JavaScript n'est capable d'accèder au style définie à l'exterieur d'un document HTML. Cela signifit que la lecture d'une propriété via :

document.getElementById('monId').style

ne sera possible que pour les propriétés definis dans l'attribut "style" de l'element ayant l'ID 'monId'. Toutes les autres définition de style ne seront pas directement accessible via JavaScript (en tout cas pas avec cette méthode). Il faut donc considéré une eventuelle valeur par defaut avec cette méthode d'accès au propriété CSS.