Spoiler en html sur canalblog

Bonjour,

J'essaie désespérement d'insérer un spoiler sur mon blog.
ça fonctionne, MAIS:
si j'édite mon article, même si je ne touche pas à ce bloc, lorsque je réenregistre ça ne marche plus. ça m'affiche le bouton, puis le texte. je suppose que canalblog fait un genre de modif automatique et que ça bloque tout.
Je n'y connais pas grand chose... quelqu'un pourrait-il m'aider à trouver un code qui fonctionne et reste tel quel à chaque fois que c'est édité? Ce message va être édité souvent et pas que par moi, ça serait trop compliqué de remettre le bon code à chaque fois!

Voilà le code que j'insère et qui fonctionne au début:

<div style="margin:20px; margin-top:5px" mce_style="margin:20px; margin-top:5px"><div class="quotetitle"><b>Spoiler:</b> <input type="button" value="Afficher" style="width:45px;font-size:10px;margin:0px;padding:0px;" 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 = 'Afficher'; }" /></div><div class="quotecontent"><div style="display: none;" mce_style="display: none;">{TEXT}</div></div></div>

Et voilà la façon dont il se transforme, et là ça ne marche plus:

<p mce_style="margin:20px; margin-top:5px" style="margin: 5px 20px 20px;"><p class="quotetitle"><strong>Spoiler:</strong> <input type="button" 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 = 'Afficher'; }" value="Afficher" style="margin: 0px; padding: 0px; width: 45px; font-size: 10px;" /></p>

<p class="quotecontent"><p mce_style="display: none;" style="display: none;">{TEXT}</p></p></p>

J'espère que j'ai été claire, merci d'avance pour votre aide!