Un postit escamotable

L'idée est de compléter le dispositif précédent en ajoutant deux boutons de commande au  billet . Ces boutons se bornent à donner chacun une classe différente au div formant le  billet . L'aspect ouvert ou fermé du billet, l'affichage du bon bouton de commande… tout se règlera ensuite par du CSS.

Comme le seul JavaScript requis est un traitement d'événement (à savoir cliquer sur un bouton) cette solution est utilisable sur tout blog OB.

Le code HTML

Il grossit un peu :

 <div id="billet" class="ouvert"> <a href="#nogo" title="Fermeture du billet" class="fermeture" onclick="document.getElementById('billet').className='ferme';">[-]</a> <a href="#nogo" title="Ouverture du billet" class="ouverture" onclick="document.getElementById('billet').className='ouvert';">[+]</a> <div class="contenu"> Le texte de votre billet </div> </div> 

Le rôle de chaque lien est assez clair, je pense : lorsqu'on clique sur ce lien (onclick) trouver (getElementById) le  billet  dans la page et lui donner une certaine classe (className=...).

Le CSS associé

Ceci vous semble-t-il logique ?

• billet ouvert : l'image de fond est  la grande , on voit le contenu et le bouton de fermeture, on masque le bouton d'ouverture ;
• billet fermé : l'image de fond est une nouvelle image  petite  (je me contenterai ici d'un rectangle de couleur), on cache le contenu et le bouton de fermeture, on affiche le bouton d'ouverture.

Traduisons en CSS :

 /* ce qui est vrai pour le billet ouvert comme fermé*/ #billet {position:absolute; left:20%; top:50px} /* aspect du billet ouvert (=reprise de la version précédente) */ .ouvert {background-image:url(http:gnagnagna/billet.png); width:218px;height:150px} /* aspect du billet fermé */ .ferme {background:#ffffb7; border:1px solid gray; width:3em;height:2em} /* aspect du contenu (=reprise de la version précédente)*/ .contenu {padding:20px} /* emplacement des boutons de commande */ .ouverture, .fermeture {position:absolute; right:2px; top:2px} /* masquer/afficher les composants du billet selon son état */ .ouvert .ouverture, .ferme .fermeture, .ferme .contenu {display:none} 

C'est tout ? Oui.

---

Quelques remarques de détail :

• comme tout à l'heure, les valeurs numériques ne sont que des exemples. Que certaines soient exprimées en em plutôt qu'en px ne doit pas vous intimider ;
• j'ai choisi de placer les deux boutons de commande au même endroit dans le billet, en haut à droite (rappelez-vous qu'on n'en voit qu'un à la fois). Ce n'est bien sûr pas indispensable, juste que tout le monde fait comme ça ;
• j'ai aussi choisi d'afficher le billet toujours au même endroit, qu'il soit ouvert ou fermé. Mais vous pouvez changer ça en reportant la définition de left et/ou top dans les règles qui définissent l'aspect 'ouvert' ou 'fermé' (exemple : le présent blog) ;
• j'ai enfin choisi d'afficher le billet ouvert lors du chargement de la page, il vous suffit de changer sa classe pour inverser cette préférence ;
• pour aller vite les boutons ne se composent que de quelques caractères. Vous pouvez bien sûr créer un joli signe '+' et un signe '-' en guise d'images de fond (ce que j'ai fait sur ce blog) 
• toujours pour aller vite, le billet  fermé  se réduit à une couleur de fond et une bordure. Vous pouvez fabriquer une petite image si vous préférez (là aussi, je l'ai fait sur ce blog).

Quelques remarques de principe :

• vous voyez maintenant l'utilité de mettre le contenu dans un div à part ? ;-)
• rien ne porte un identifiant, exception faite du  billet  lui-même. Vous pouvez donc créer autant de billets que vous le désirez, pourvu que chacun porte un identifiant différent. Je vous laisse le soin de retoucher les deux petits bouts de JS et de compléter le CSS ;

---

Un peu de pensée profonde, pour conclure. Le principe technique est, finalement, très simple :

1. on clique sur un lien,
2. ça change une classe quelque part,
3. ce changement de classe fait que certaines règles CSS ne s'appliquent plus et que d'autres agissent.

C'est simple et très général, vous avez désormais de quoi créer n'importe quel gadget cliquable qui vous fait envie : pas seulement afficher ou masquer quelque chose, mais changer une image de fond, une police de caractères, voire un emplacement dans la page. Pour la petite histoire : c'est exactement le principe employé ici pour faire des "Lire la suite" ou pour donner leur pleine largeur à des photos très larges.

Autre conséquence agréable : puisque les deux petits bouts de JS n'interviennent pas directement sur l'aspect de leur cible mais se contentent d'en changer la classe, personnaliser ce gadget revient à personnaliser des classes en CSS. Autrement dit vous n'avez pas besoin de connaître les finesses de JavaScript (puisque je vous fournis le code nécessaire) mais seulement de savoir triturer du CSS. Sympathique, non ?

• Postit simple
• Postit escamotable
• Postit "intelligent"