Comme je n'y connait rien en javascript, je met ici le bout de code qui permet de masquer et d'afficher des blocs dans une page html (comme dans la barre de gauche de ce site web). Comme ça, si jamais j'en ai de nouveau besoin, j'aurais juste à faire un copier-coller sans avoir besoin de chercher partout sur le web pourquoi ça marche pas (acolade oubliée, etc.).
A place dans head :
<script type="text/javascript">
<!--
// Affichage / masquage d'un objet spécifié par son attribut id
function toggle(object_id){
var obj=document.getElementById(object_id)
if(obj.style.display == 'block')
obj.style.display='none'
else
obj.style.display='block'
}
//Masquer certains éléments lors du chargement de la page
function cache(){
document.getElementById( "blocid" ).style.display='none';
}
//-->
</script>
Le body :
<body id="css-key" onload="cache() "></body>
Le lien d'affichage/masquage :
<a href="javascript:toggle('blocid')">Texte du lien</a>
Le lien va masquer ou afficher le bloc (ou n'importe qu'elle balise) donc l'id est blocid
. Si l'on veut qu'il soit caché par défaut, il faut le mettre dans la fonction cache
, car s'il est directement masqué par des feuilles de style css, ça pose des problèmes d'accessibilités pour ceux qui ont le javascript désactivé. Et si tous les blocs sont affichés par défaut, la fonction cache et l'appel dans la balise body ne servent à rien.
On pourrait améliorer encore la chose en mettant une case à cocher dans un coin Sauvegardez vos paramètres
qui enregistrerait dans un biscuit l'état des blocs, et le restaurerait lors du chargement de la page. Je ne sais pas faire cela (et je n'ai pas le temps de chercher pour l'instant).
Commentaires
J'ai remplacé ton
"if" par
"if((obj.style.display == 'block')||(obj.style.display == ''))"
Comme si le style display n'est pas renseigné, il ne faut pas un "clic" pour activer la fonction javascript.
Pas con
Merci pour l'info !
Merci beaucoup!
Juste question en plus, je suis nulle en Js,
comment faire quand l'on a plusieurs liens sur une même page et que l'on veut que le bloc 01 (visible par le clic sur le lien01) soit masqué quand on clique sur le lien02--> le bloc 02 apparaît à la place du bloc01
Bien sûr, il faudrait un code du style :
function toggle(object_id_show, object_id_hide){ var obj_show=document.getElementById(object_id_show); var obj_hide=document.getElementById(object_id_hide); obj_show.style.display='block'; obj_hide.style.display='none; }avec des liens tels :
<a href="javascript:toggle('blocid1', 'blocid2')">Texte du lien</a>