jQuery Spoilers, et vos textes jouent à cache-cache

10/08/2007

Voici un petit script qui va plaire aux mordus des forums.

Spoilers est donc un petit script (jquery) pour faire de beau ... spoilers ! Whoa dis-donc, j'me suis foulé là, j'vais aller me faire un pause de 10 minutes .... (O_o)

Pour ceux qui n'ont jamais entendu parler de ce mot, c'est en fait un système qui permet de cacher un bout de texte, et qui apparait en général au survol ou au clic.

L'intérêt est donc de cacher certaines informations dans le cadre de concours, blagues, chute d'une histoire, infos décalées, ...

Mise en place:

Comme d'habitude, on commence par inclure le framework jquery
<script type='text/javascript' src='jquery.js'></script>
Ensuite on intègre le plugin Spoiler
<script type='text/javascript' src='sgbeal-spoilers-20070808.jquery.pack.js'></script>
On inclus le css lié
.jqSpoiler {
   background-image:url(spoilers.png);
   border:1px solid red;
   color: green;
}
.jqSpoiler span {
   visibility: hidden;
}
.jqSpoiler.reveal {
   background-image: none;
   border: none;
}
.jqSpoiler.reveal span {
   visibility: visible;
}
on initialise le spoiler
$('.jqSpoiler').initSpoilers();
Et voilà, vos textes à cacher devront se structurer comme ceci:
<span class='jqSpoiler'><span>texte caché ici</span></span>