Forum d'entraide PHPFrance

Bonjour,

Débutant en JS j'aimerais savoir comment il était possible de masquer/afficher une partie du contenu d'une page.
Je m'explique :
J'ai une pages comportant 4 blocs. J'aimerais au chargement de la page n'afficher que le premier et en cliquant sur un lien afficher les trois autres en dessus du premier tout simplement.
C'est sûrement très basique pour vous je pense.

Exemple en image (image texte XD) : Voilà j'espère que vous pourrez m'aider sur ce coup merci.

tu peux mettre le contenu à manipuler dans un div, lui donner un id et agir sur sa proriété de style "visibility": la mettre à "visible" l'affiche et à "hidden" le cache.

en javascript: ou

Et je met ça comment dans mon lien ?
Dans un un onclick ou bien faut il s'y prendre autrement ?
Je met un <a onclick= ...> ou non.

Au choix... dans un lien, il te suffit de préfixer par "javascript:" pour que le navigateur ne fasse pas une redirection, mais tu peux tout aussi bien faire ça lors d'un onClick sur un élément de ta page :

<a href="javascript:document.getElementById('id du div').style.visibility = 'visible';">Afficher</a>

Tu peux aussi faire appel à une fonction javascript pour tester si le div est visible ou non pour l'afficher ou le masquer avec un seul lien :

<a href="javascript:maFonction();">Afficher/Masquer</a>

<script language="javascript">
function maFonction() {
  if (document.getElementById('id du div').style.visibility == 'visible') { // si le div est visible
    document.getElementById('id du div').style.visibility = 'hidden'; // on le masque
  }
  else { // sinon
    document.getElementById('id du div').style.visibility = 'visible'; // on l'affiche
  }
}
</script>

Enfin, si tu ne veux pas laisser de "trou" dans ton code puisque l'attribut "visibility:hidden" ne fait que cacher l'élément sans le retirer, tu peux également utiliser l'attribut "display" avec les valeur "none" pour le cacher, ou "block" / "inline" pour l'afficher

Merci.

Alors deux choses :
- comment dois je faire pour le mettre caché par defaut.
- et quelle est la syntaxe de display et block car effectivement ça me fait une belle page blanche avec le hidden et si je voulais masquer c'était justement pour que la page ait une taille acceptable au départ. est ce comme ceci ?

Merci à vous.

Attention (rappel)

• == est utilisé comme symbole de compraison d'égalité dans un test telque "if"
  = est utilisé comme symbole d'affectaion d'une valeur à une variable comme A=1 (A reçoit la valeur 1)

Oula exact == est l'opérateur de comparaison et = celui d'affectation.
Mais je n'ai pas écrit cela dans mon code ; )

Pourrais tu me dire comment puis je mettre ma div en caché par défaut ?

Merci

en posant un style en dur sur la balise
Exemple: style que tu peut modifier dynamiquement par javascript suite à des événements (click ...)
Tu vois le principe est simple: tu pose un style et puis tu programmes javascript pour le modifier

1°temps: style="display:none" en HTML
2°temps:

Bien le merci à vous.
Ca va me permettre de faire quelque chose de plus aboutie

Quelle est la différence entre ces deux attributs. Pour le moment j'utilise inline c'est nikel.
Que fait block?

Sur alsacreations, ils en parlent un peu :

http://blog.alsacreations.com/2004/06/0 ... connaissez

Mais en gros, l'effet est le même apparemment ^^