Afficher masquer un paragraphe, un menu
Présentation 
Voici l'exemple de l'astuce proposée
[+/-] Afficher/Masquer le bloc1
Bloc1
[+/-] Afficher/Masquer le bloc2
Bloc2
C'est une fois de plus une astuce trouvée dans l'aide Google, par contre cette fois si elle a été entièrement francisée...
Je vais commencer par donner le code puis y apporter quelques explications
C'est de nouveau une astuce où il faudra ajouter un bout de code dans le Css de la page, entre les balises de style, un code javascript, entre les balises head et une partie dans le corps de la page, entre les balises body selon l'endroit ou l'on veut utiliser cette astuce, dans le cas présent, le code est mis directement dans le billet
Je vais colorer les balises de mise en forme (html, style, head et body), je précise qu'elles ne sont là qu'à titre indicatif dans un soucis d'identification et qu'elles ne font pas partie du code à copier/coller...
Voici le code 
<html>
<head>
<style>
.masquer {display:none}
.afficher {display:inline}
</style>
<script type="text/Javascript">
function afficher_masquer (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="afficher") {
whichpost.className="masquer";
}
else {
whichpost.className="afficher";
}
}
</script>
</head>
<body>
<a href="javascript:afficher_masquer('bloc1')">
[+/-] Afficher/Masquer le bloc1</a>
<span class="afficher" id="bloc1">
Bloc1
ligne 1
ligne 2
ligne 3
ligne 4
ligne 5
</span>
<a href="javascript:afficher_masquer('bloc2')">
[+/-] Afficher/Masquer le bloc2</a>
<span class="masquer" id="bloc2">
Bloc2
ligne 2_1
ligne 2_2
ligne 2_3
ligne 2_4
ligne 2_5
</span>
</body>
</html>
Les Explications
Bon c'est assez simple
- Css
- pour le Css, on crée deux balises,
- une que l'on appel "masquer" qui quand elle sera active masquera le contenu de la balise qui lui fait référence
- une que l'on appel "afficher" qui quand elle sera active, affichera le contenu de la balise qui lui fait rréférence
Avec ce procedé, on peut travailler sur son thème sans afficher à l'écran les modifications, ou alors certains l'utilisent pour masquer des compteurs
- javascript
- Pour le javascript, on crée une fonction que l'on appel "afficher_masquer" qui aura en gros comme fonction quand le script sera appelé
- de changer la balise Css masquer en afficher
- ou de changer la balise Css afficher en masquer
selon l'état ou elle se trouve
En gros affiches si c'est masqué, masques si c'est affiché...;)
pour que cela fonctionne, ces deux premiers codes doivent être placés dans le thème de l'espace (template)
- code
- Passons maintenant au code contenu entre les balises Body.
A l'origine le code est fait pour pouvoir afficher ou masquer le contenu des billets, mais j'en fais une explication sur un fonctionnement plus large, par exemple- on peut décider d'utiliser ce code pour afficher/masquer le contenu d'un menu latéral en cliquant sur son titre
- ou alors directement à l'interieur d'un billet, pour par exemple masquer la réponse d'une charade jusqu'à ce que le visiteur décide d'en voir la chute
- ou alors donner une explication qui n'a pas toujours besoin d'être affichée, enfin tout un tas de possibilités...
Il faut cependant savoir que même masqué, le contenu est chargé à l'initialisation de la page: si vous décidez de masquer une vidéo de 10Mo jusqu'à ce que le visiteur clic sur "voir la video", la page sera aussi longue à afficher que si la vidéo est présente d'entrée...
Isolons maintenant le code
<a href="javascript:afficher_masquer('bloc1')">
[+/-] Afficher/Masquer le bloc1</a>
<span class="afficher" id="bloc1">
Bloc1
ligne 1
ligne 2
ligne 3
ligne 4
ligne 5
</span>
Les 2 blocs sont identiques à ceci près: leur état initial
l'un est masqué, l'autre est affiché, ceci est définit par la ligne de code de la- balise
- <span class="afficher" id="bloc1">
(pour ceux qui voudraient plus d'explications sur le liens entre les balises html et les balises Css, je propose de (re)lire ce billet)- Id est utilisé pour donner un nom à la balise, pour la différencier de la seconde, elle est nommée "bloc1", j'aurais pu lui donner le nom "paragraphe1" "rebus1" ou tout autre nom (attention cependant, ce nom sera pris en référence dans le lien)
- <span class="afficher"> est utilisé pour définir le style Css du contenu de la balise span ici cela nous renvoit a la balise .afficher {display:inline}
- <a href="javascript:afficher_masquer('bloc1')">[+/-] Afficher/Masquer le bloc1</a>
- <a href="">[+/-] Afficher/Masquer le bloc1</a> nous indique qu'un lien hypertexte est appliqué sur le texte [+/-] Afficher/Masquer le bloc qui pourrait tout aussi bien être une image ou un bouton
- la valeur du lien est javascript:afficher_masquer('bloc1') qui nous indique d'executer le javascript nommé "afficher_masquer" sur la balise nommée "bloc1" (attention donc si vous renommez la balise)
lien
Voila, une fois encore je suis entré très dans le detail, afin que ce code puisse être amélioré par exemple en n'utilisant pas une seule phrase pour afficher/masquer le contenu, mais afficher ou masquer selon le cas...
Pour les plus observateurs j'utilise cette astuce sur les commentaires comme expliqué sur ce billet
Billet publié par Krom à 16:25
Meme Catégorie
Lien Permanent
Ajouter un commentaire
" Bonjour, Vous m'avez déjà pas mal aidé à fignoler mon blog, et je viens d'utiliser votre astuce pour les listes "masquer/afficher". Toutefois, au lieu du [+/-] j'aurais aimé utiliser le signe ► quand la sous-liste est cachée, et le signe ▼ quand la liste est déroulée. Pourriez-vous m'aider s'il vous plaît ? Au fait, bonne année, et tous mes voeux de santé et de bonheur pour 2007 ! "
" Salut,
si c'est pour mettre dans un blog ou un site exclusivement en html, je ne sais pas le faire, faudrait chercher la reponse sur des forum de sites d'astuces de javascript, en fait le probleme est de stocker dans une variable l'etat deroulée ou non du menu "
Ajouter un commentaire
<< Masquer les Commentaires