Cacher, révéler, modifier un élément par simple clic

proposé par Gérard, alias lefildargent

 

Pour faire "branché", j'aurais pu parler de "spoiler". Prenons plutôt tout de suite un exemple avec ce tableau des menus de la semaine.  Cliquez sur la loupe en face du jour qui vous intéresse et observez.

Lundi
Mardi 
Mercredi
Jeudi
Vendredi

C'est compliqué ?

C'est facile si on se contente d'appliquer à la lettre ce qui est dit ici.

Ca peut vous donner des perspectives moins faciles pour un effet plus élaboré et ce tutoriel est aussi un peu fait pour ça. Mais nous n'en parlerons pas ici.

Dans tous les cas, on va devoir travailler un peu le code HTML, mais ce n'est pas méchant.

Comment ça marche ?

L'exemple présenté plus haut est réalisé avec 2 modules Jimdo.

  • Un module widget/HTML qui contient un script avec notamment 2 fonctions :
    • cachemontre qui cache ou au contraire, révèle la partie qui est cachée au départ, 
    • plusmoins qui bascule l'image "loupe plus" en "loupe moins" et inversement.
  • Un module Tableau contenant un tableau de 5 lignes (une par jour) et 3 colonnes :
    • le jour
    • l'image de la loupe
    • la partie cachée 

Le script dans le module widget/HTML

Ce module doit être inséré avant le module (module Tableau dans notre exemple) sur lequel doit s'appliquer l'effet. On peut même le positionner dans la sidebar s'il doit être utilisé sur plusieurs pages du site. 

<script language="javascript" type="text/javascript">
/* <![CDATA[ */
var moins="URL de l'image loupemoins";
var plus="URL de l'image loupeplus";
function cachemontre(id) {
  x=document.getElementById(id) ;
  if (x.style.display=="none") {x.style.display="block" ; }     else {x.style.display="none" ;}
}
function plusmoins(id) {
  x=document.getElementById(id) ;
  if (x.src==plus) {x.src=moins ;}
  else {x.src=plus ;}
}
/* ]]> */
</script>

Dans la première partie de ce script, on définit les 2 variables moins et plus pour ne pas alourdir le code de la fonction plusmoins.

Les URLs des images de loupe utilisées dans notre exemple sont

http://sd-2.archive-host.com/membres/up/99039867067298503/loupemoins.gif et
http://sd-2.archive-host.com/membres/up/99039867067298503/loupeplus.gif

mais il serait préférable que vous preniez vos propres images.

 

Sans entrer dans le détail des fonctions cachemontre et plusmoins, on notera qu'elles reçoivent chacune en paramètre id l'identifiant de l'élément HTML (div pour cachemontre, img pour plusmoins) sur lequel elles agissent.

Le module tableau de notre exemple

Nous avons utilisé ici un tableau, mais nous aurions pu utliser un module texte. L'essentiel est de comprendre la logique de l'ensemble. Le principe général est qu'il faut passer au code HTML (donc le bouton HTML) pour

  • associer un identifiant unique (attribut id) à l'élément HTML sur lequel les fonctions cachemontre et plusmoins doivent agir,
    • NB : Dans notre exemple, on a choisi arbitrairement des identifiants de la forme lxcy (x=N° de ligne et y=N° de colonne)  
  • appeler ces fonctions grâce à l'attribut onclick du lien (balise a) contenant l'image (la loupe dans notre exemple) et sur lequel le visiteur cliquera.

Puisqu'il faut passer par le code HTML, nous allons tout de suite examiner la forme HTML du module Tableau utilisé dans notre exemple. On fait juste apparaitre ici en rouge le code sur lequel on est obligé d'intervenir. Vous pouvez copier/coller ce code pour reproduire chez vous notre exemple après avoir remplacé

URL de l'image loupeplus

par

http://sd-2.archive-host.com/membres/up/99039867067298503/loupeplus.gif

ou mieux par votre propre URL.

<table id="l0c0" border="0" cellspacing="0" cellpadding="3">
<tbody><tr><td>Lundi </td><td>

<a onclick="plusmoins('l1c2');cachemontre('l1c3');" href="#l0c0">

<img id="l1c2" src="URL de l'image loupeplus" alt="" /></a>

</td><td>
<div id="l1c3" style="display: none;">
<ul><li>Pâté de campagne </li><li>Steak frites </li><li>Laitue </li>
<li>Fromages ou dessert </li></ul>
</div>
</td></tr><tr><td>Mardi </td><td>

<a onclick="plusmoins('l2c2');cachemontre('l2c3');" href="#l0c0">

<img id="l2c2" src="URL de l'image loupeplus" alt="" /></a>

</td><td>
<div id="l2c3" style="display: none;">
<ul><li>Crudités </li><li>Boudin purée </li><li>Frisée </li><li>Fromages </li>
<li>Gâteau </li></ul>
</div>
</td></tr><tr><td>Mercredi </td><td>

<a onclick="plusmoins('l3c2');cachemontre('l3c3');" href="#l0c0">

<img id="l3c2" src="URL de l'image loupeplus" alt="" /></a>

</td><td>
<div id="l3c3" style="display: none;">Relâche<img style="display: inline;" src="http://sd-2.archive-host.com/membres/up/99039867067298503/smiley.jpg" alt="" width="40" height="40" /> </div>
</td></tr><tr><td>Jeudi </td><td>

<a onclick="plusmoins('l4c2');cachemontre('l4c3');" href="#l0c0">

<img id="l4c2" src="URL de l'image loupeplus" alt="" /></a>

</td><td>
<div id="l4c3" style="display: none;">
<ul><li>Rillettes </li><li>Escalope spaghettis </li><li>Scarole </li>
<li>Fromages </li><li>Fruits </li></ul>
</div>
</td></tr><tr><td>Vendredi </td><td>

<a onclick="plusmoins('l5c2');cachemontre('l5c3');" href="#l0c0">

<img id="l5c2" src="URL de l'image loupeplus" alt="" /></a>

</td><td>
<div id="l5c3" style="display: none;">
<ul><li>Crudités </li><li>Poisson Purée; </li><li>Batavia </li>
<li>Fromage; </li><li>Gâteau </li></ul>
</div>
</td></tr></tbody></table>

On voit donc dans ce code, que nous sommes intervenu pour intégrer les parties cachées dans une div identifiée de manière unique et avec le style display:none pour qu'elles n'apparaissent pas au départ.

De même, les images de loupes sont identifiées et intégrées dans un lien (balise a) avec l'attribut onclick appelant les fonctions plusmoins et cachemontre.

Notons aussi que de toutes façons, on est obligé de passer en HTML pour intégrer une image dans un tableau. C'est le cas du smiley sur la ligne du Mercredi.

Enfin, l'identifiant spécial l0c0 associé au niveau de la balise table permet de rester (grâce à l'attribut href="#l0c0" de la balise a) toujours positionné au début du tableau à chaque clic sur la loupe.