Annonce Cacher une partie d'un texte [spoiler]

Bonjour,

Parfois, c'est utile de cacher une partie d'un texte dans un article. Pour se faire, il suffit d'utiliser le javascript! J'ai trouvé ce script sur le Net, et merci à son auteur. ^^
Il faut que votre blog soit activé!

Menu - Apparence - Zone de script - Statut : Actif

Sinon, ça ne marchera pas!

C'est dans cette zone que vous copiez et coller ce code :

<script type="text/javascript">
function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
</script>

Puis dans la page de votre article

Cliquez sur le bouton : Éditer et ensuite - Vous devez être en mode 'Expert' et cliquez sur Code source
Un petit bouton comme ça : <>

Puis vous copiez et collez ceci :

<button onclick="toggle_visibility('spoil');">MONTRER</button>
<div id="spoil" style="display: none;">
<p>Ici j’écris mon texte caché.</p>
</div>

Explication

Le texte qu'on souhaite cacher doit toujours être entre les balises div.
Dans mon exemple c'est un div spoil.

Pour le style du bouton, si vous avez configuré un bouton déjà sur votre blog, le bouton MONTRER prendra le même style. Autrement, vous pouvez ajouter votre style. Mais n'oubliez pas d'indiquer la classe du style dans la fonction du bouton :

<button onclick="toggle_visibility('spoil');" class="votre_classe_style"> MONTRER </button>

Et le style vous rajoutez dans la feuille de style du blog.

Menu Apparence - Modifier thème - Ajouter du CSS

Par exemple :

.spoil {
  background-color:#fff;
  padding:1em
}
.votre_classe_style {
  padding:.2em;
  font-weight:bold; 
  font-family: Arial, sans-serif;
  border: 1px solid black;
  background-color: #333;
}

Voilà, si vous avez des questions, n’hésitez pas!

il est sympa ce petit code javascript.

➤ J'apporte une info complémentaire pour la partie html :
Pour utiliser deux fois ou plus ce code dans une même page il faut penser à ne pas mettre partout le même nom d'identifiant (spoil) car celui-ci doit être unique sur une même page-url. 
Exemple pour trois utilisations :

1. <button onclick="toggle_visibility('spoil1');">.....;
   <div id="spoil1" style=".....
   .............
2. <button onclick="toggle_visibility('spoil2');">.....;
   <div id="spoil2" style=".....
   .............
3. <button onclick="toggle_visibility('spoil3');">.....;
   <div id="spoil3" style="...
   .............

➤ Une simplification d'écriture possible sur Eklablog:

var e = document.getElementById(id);  c'est pareil que : var e = $(id);

Explications sur le blog de  -Thierry- , à cette adresse :
http://gerer-mon-blog.eklablog.fr/script-et-selection-d-elements-en-javascript-a107718564

Oui, il peut servir.

Oui, vous avez raison, si on veut mettre plusieurs dans une page il faut changer de nom.

On peut aussi ajouter différents styles de boutons dans la feuille de style CSS.

Merci pour le blog et info complémentaire. ;)

Bonjour,

les spoilers n'ont qu'à bien se tenir 

perso j'avais testé (et réussi !) l'insertion d'un spoiler directement DANS un article↗, en 2014, ça nous rajeunit pas ;)   ça me semble plus simple à faire (et plus sûr dans le temps ?) que le JS qui peut aussi générer des interactions variées selon les navigateurs.... (tu vois à quoi je pense stormalo ? )  

Mais c'est un joli truc pour faire plein de jolis spoilers 

Merci.

@Pipiou

Oui, ça ne rajeunit pas et ça explique sans doute un trou de mémoire.

Car le lien conduit à un article qui utilise lui aussi un code Javascript,  un peu comme celui de DrCut, mais en ciblant son action sur la première des class de l'élément contenant (d'après ma compréhension rudimentaire). Ce JS est dans l’article
Si on souhaite deux "Voir le texte" l'un sous l'autre il faut rajouter un code JS avec une nouvelle indexation (ou réécrire le précédent si on sait faire)

A mon avis celui de DrCut peut se placer n'importe ou (zone de script, module html, article ...) et on l'appelle dans le onclick en indiquant l'identifiant de la cible. Même si on rajoute des div en amont dans le même contenant, ce devrait être OK.
Il me semble plus simple à utiliser

ho j'ai honte !
faut dire que j'ai pas vérifié, j'étais sûre que j'avais fait ça sans JS ! raté 
bon bin je sors ;) 

Merci pour vos interventions.
Ce qui est dommage c'est que Dieu d'eklablog n'a pas ajouté un spoiler dans les options de "Répondre". Ce serait utile dans les commentaires pour des discussions libres.

Merci DrCut pour cette astuce que je viens de tester Me reste plus qu'à assimiler les codes de mise forme du texte....