Spoiler

05.11.2011

/!\ Le javascript doit être activé pour pouvoir faire ça!

Un spoiler, qu'est ce que c'est? Cliquez sur le bouton en dessous:

Cliquez sur le bouton =>

Voilààà. Pratique non ? Bon bref, voilà le code:

<div style="margin: 20px; margin-top: 5px;">
<div class="quotetitle">
<strong>TEXTE AVANT LE BOUTON</strong>
<input style="height: HAUTEUR DU BOUTON; width: LARGEUR DU BOUTONpx; font-size: TAILLE DE LA POLICE DU BOUTONpx; 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'; }" type="button" value="TEXTE DU BOUTON" /></div>
<div class="quotecontent">
<div style="display: none;">
<p>TEXTE SPOILER</p>
</div>
</div>
</div>

Il faut remplacer les textes en majuscule par vos propre valeur.

Vous pouvez également modifier son apparence en CSS avec les deux classes suivantes :

.quotetitle {propriété: valeur;}

Cette classe est pour le texte visible lorsque le spoiler est caché et le bouton (le bouton est a personnaliser avec "input" en css)

.quotecontent {propriété: valeur}

Voici la classe de votre texte caché.

Avec ça, vous avez un spoiler entièrement personnalisable ;)