Afficher/cacher une div

Bonsoir tout le monde !

En cliquant sur du texte j'aimerai faire apparaître une div (id="search") si celle-ci est cachée et la faire disparaître si celle-ci est déjà affichée.

J'ai fait un peu de bricolage...

- Ma fonction dans l'en-tête :

function show_hide ()
{
	if (document.getElementById('search').style.display = "none")
	{
	document.getElementById('search').style.display = "block";
	}
	
	else
	{
	document.getElementById('search').style.display = "none";
	}
}

- L'activation de la commande dans le body :

<a class="menu" href="javascript:;" onClick="show_hide ();">Contact</a>

- Le style CSS de la fameuse div :

#search {
width: 240px;
height: 100px;
background: url(search.png) no-repeat;
position: relative;
left: 650px;
top: 0px;
z-index: 1;
display: none;
}

Par défaut la div est donc cachée quand j'arrive sur ma page (display: none;), lorsque je clique une première fois sur mon texte elle s'affiche sans problème mais ensuite en cliquant à nouveau j'aimerai qu'elle se cache mais rien ne se produit...

Une idée du problème ? Ou alors faut-il que je m'oriente vers un script totalement différent (j'ai comme l'impression que le mien est maladroit ) ?

Salut,

if (document.getElementById('search').style.display = "none")

Attention à ne pas confondre "=" et "==" (voire "===")
Modifié par marcv (08 Apr 2009 - 20:38)

Merci beaucoup à toi marcv, ça fonctionne !

Seul petit problème, et aucune idée d'où il vient : je dois double-cliquer sur mon texte la première fois que je veux faire apparaître la div. Après un clique simple suffit.

Une petite idée ? C'est pas très grave en soit mais assez frustrant pour l'utilisateur...

Encore merci, je ferai plus attention à la syntaxe des conditions à l'avenir...

La feuille de styles et la propriété style des éléments, c'est pas la même chose, même si intuitivement on pourrait penser que si... Au chargement de la page, le style.display de ta div est vide (il ne peut être alimenté que par Javascript).

Solution rapide :

if (document.getElementById('search').style.display != "block")

Cependant, si je peux me permettre un conseil rapide : ta div ne pouvant être affichée que via Javascript, il est impossible de l'afficher avec un navigateur ne disposant pas de Javascript (désactivé ou inexistant). Il faudrait donc que le masquage initial soit lui aussi effectué par Javascript, de sorte que rien ne soit masqué si js n'est pas dispo :

[b]HTML[/b]
<a id="monLien" href="#maDiv">Contact</a>
<div id="maDiv">blabla</div>

[b]JS[/b]
window.onload = function() {

    var maDiv = document.getElementById('maDiv');
    maDiv.style.display = 'none';

    document.getElementById('monLien').onclick = function() {
        if (maDiv.style.display == 'block') {
            maDiv.style.display = 'none';
        } else {
            maDiv.style.display = 'block';
        }
        return false;
    };

};

Modifié par marcv (08 Apr 2009 - 23:54)

Super j'ai bien saisi le problème dans ce mix CSS/JS !

C'est ce genre de détails (plutôt importants) que je décèle pas encore. Je n'aurai même pas pensé au fait que JS puisse être inexistant ou désactivé...

Merci beaucoup pour ton précieux conseil, c'est exactement ce dont j'avais besoin

Problème résolu !