Faire Apparaitre et disparaitre en un click

[jiojioforever]

Bonjour,
je cherche un petit script fluide qui pourrait m'aider dans mon développement de site.

Par exemple j'ai 3 parties principales :

1 OBJET
2 DEFINITIONS
3 SOUSCRIPTION

et quand l'utilisateur click sur DEFINITIONS op le 3 SOUSCRITION s'abaisse pour laisser place au contenu de DEFINITIONS

Une méthode la plus référencable... JS ? PHP ?

Merci d'avance

[e-kiwi]

tres simple :
tu mets le contenu de souscriptions dans un div que tu nomme comme tu veux (ex : id=toto) que tu met en style : display:none
idem pour les deux autres

et sur clic de definitions, tu appelles un js qui met style.display:none aux deux autres et display:yes a celui là

[jiojioforever]

tu as pas un lien avec un exemple :$

[biscuit]

Code: Tout sélectionner

<script>
  function show() {
    document.getElementById('toto').style.display = 'block';
  }
</script>

<a href='javascript: show()'>Affiches-moi</a><br>

<div style='display:none;' id='toto'> <!-- toto est une idée d'e-kiwi -->
Mon Contenu caché
</div>

Voilà... pas testé, mais ça doit jouer...

[nexxen]

Et pour que l'utilisateur puisse refermer le DIV "toto":

Code: Tout sélectionner

function vaEtVient() /* sans jeux de mot, difficile d'éviter les anglicismes ;) */
{
   if(document.getElementById('toto').style.display == '')
  {
    document.getElementById('toto').style.display = 'block';
  }
  else
{
    document.getElementById('toto').style.display = '';
}
}


C'est un peu plus compliqué si tu veux que l'ouverture d'un sous menu provoque la fermeture de celui qui est déjà ouvert (et en terme d'ergonomie, c'est assez déstabilisant pour l'utilisateur qui ne sait plus ou il en est dans ton menu...mais ça c'est une autre histoire...)

[zim3]

tu devrais pouvoir faire ça en 2 lignes Jquery

[jiojioforever]

ok ok je vais tester ça

[jiojioforever]

est ce que les robots google apprécient ce genre de truc ? c'est un contenu normal dans la page pour eux ou pas ?

[jiojioforever]

nexxen avec ta fonction le bloc s'affiche bien mais ne disparait pas quand on reclik dessus

[biscuit]

Et pour que l'utilisateur puisse refermer le DIV "toto":

function vaEtVient() /* sans jeux de mot, difficile d'éviter les anglicismes */
{
if(document.getElementById('toto').style.display == 'none')
{
document.getElementById('toto').style.display = 'block';
}
else
{
document.getElementById('toto').style.display = 'none';
}
}

C'est un peu plus compliqué si tu veux que l'ouverture d'un sous menu provoque la fermeture de celui qui est déjà ouvert (et en terme d'ergonomie, c'est assez déstabilisant pour l'utilisateur qui ne sait plus ou il en est dans ton menu...mais ça c'est une autre histoire...)

juste oublié 2 petites nones (pour éviter les anglicismes )... et ça doit jouer

[jiojioforever]

ah merci ça fonctionne

[nexxen]

juste oublié 2 petites nones (pour éviter les anglicismes Wink )... et ça doit jouer

effectivement c'est mieux comme ça!

Par contre, si le menu doit être fermé par défaut, au chargement de la page, et que ce comportement soit assuré par les CSS (#toto {display: none; ...}), je crois que la propriété style.display ne sera pas renseignée (il faudrait cliqué 2 fois pour faire apparaitre le sous-menu). Pour éviter ce pb le test doit se faire sur les 2 valeurs none et '' (vide) :

Code: Tout sélectionner

if(document.getElementById('toto').style.display == 'none' || document.getElementById('toto').style.display == '') { ...}