Annonce Faire un spoiler [texte caché] personnalisable

Bonjour à tous!

Pour mon premier tuto sur ce forum, je vais vous montrer comment faire un spoiler

HTML personnalisable très facilement!

Pour cela, vous devez tout d'abord pouvoir modifier le code JavaScript du site, pour les nouveaux,

c'est par ici : http://doc.eklablog.com/demandes-d-activation-javascript-topic12367

PS : pour faire un URL cliquable, il suffit de le sélectionner et de cliquez sur "Insérer / éditer un lien", le symbole est une maille de chaîne en haut de l'éditeur d'article.

Donc, revenons au sujet principal, le spoiler :

Le code :

Ouvrez l'éditeur HTML d'une page ou d'un article et placez vous entre deux lignes de texte marquées

par <p>DU TEXTE</p>. Le <p> et le </p> indiquent le début et la fin d'un paragraphe.

Placez votre curseur juste avant un <p> et appuyez sur Entrée pour insérer une ligne vierge.

Au début de cette ligne, copiez-collez ce code :

<div style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;"><strong>NOM</strong> <input style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Cacher'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Montrer'; }" type="button" value="Montrer" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 2px;">
<div style="display: none;"><br />
<p>VOTRE TEXTE</p>
</div>
</div>
</div>

Cliquez sur "Mettre à jour" et sur "Enregistrer", fermez puis voyez le résultat. Cliquez sur "Montrer"

pour dévoiler le spoiler et magie! Le "Montrer" se transforme en "Cacher"!

Si vous voulez changer cela, repérez les "Montrer" et les "Cacher" dans le code et remplacez-les par le message choisi, il doit être le plus court possible!

/!\ Avertissement :

Ne mettez pas d'accents dans ce code sous peinne de voir un texte incompréhensible à la place!

Remplacez les accents par ces codes-ci :

é = &eacute;

è = &egrave;

Voici un exemple : Le si&egrave;cle dernier, en &eacute;t&eacute;...

Ce qui donne : Le siècle dernier, en été...

Le texte :

Maintenant qu'on à un joli Montrer / Cacher dans notre spoiler, rendons-le utile,ajoutons-y un texte

à cacher!

Pour cela, et pour des raisons pratiques, utilisez la fenêtre d'édition classique et pas la fenêtre d'édition

HTML. Ouvrez le spoiler avec le bouton Montrer dans la fenêtre d'édition et vous verrez à l'intérieur

"VOTRE TEXTE". Remplacez-le par le texte que vous souhaitez cacher, vous pouvez même, avec les outils habituels EklaBlog, des liens, des images, des vidéos...

Ainsi, en utilisant la fenêtre d'édition classique et pas la fenêtre HTML, vous pouvez plus

aisément insérer des images, des vidéos, des accents...

Par contre, évitez les sauts à la ligne, appuyez plutot sur Espace jusqu'à aller à la ligne suivante.

Le nom :

Toujours dans la fenêtre d'édition classique, vous pouvez changer très simplement le nom du spoiler.

Comment?

Eh bien c'est simple, séléctionnez le "NOM" à gauche du bouton et écrivez le nom que vous souhaitez

donner au spoiler, et, les accents sont autorisés!

C'est fini!

Je vous conseille tout de même de garder une copie de ce code au cas ou vous feriez une mauvaise

manipulation qui pourrait rendre le spoiler inutilisable.

Désolé pour la taille énorme de ce tuto mais j'était d'humeur à écrire

Désolé aussi pour les fautes d'ortographe.

Bonne spoilation!

Merci beaucoup pour ce tuto !!!

ça peut servir.....c'est sympa!!

Merci beaucoup pour ce tuto, il est très utile pour mon blog ! :)

Merci pour l'astuce! :)

Ohlala depuis le temps que j'avais besoin de mettre des spoilers dans mes blogs :O

Alors là c'est super chette, merci beaucoup ! :D .

Ca marche pas très bien, chez moi...

Pourtant, je copie le code et tout :o mais je clique dessus, le bouton ne change pas et rien ne se montre

Avec comparateurdenergie.be vous pouvez comparer les installateurs des panneaux photovoltaïques wallonie et calculer immédiatement combien vous pouvez économiser avec un système d’énergie renouvelable (panneaux photovoltaique, pompe à chaleur, boiler thermodynamique et chaudière à condensation)...

https://comparateurdenergie.be/