[HTML] bouton déroulent / spoiler

J'ai découvert ça en 2011, donc ça remonte, mais je voulais le partager avec vous. 

Voilà, vous tombez sur mon blog test.

Le code HTML se déroule en deux parties, vous devez mettre le code dans la partie HTML d'un module simple. 

1ERE PARTIE :

<p><input style="float: left; width: Xpx; background-color: COULEUR;" onclick="$('fr1').show();$('fr2').hide();$('fr3').hide();" type="button" value="TEXTE" /></p>

X ---> width signifie "largeur". Vous devez remplacer le X par une valeur (un nombre) qui désignera la largeur du bouton.

COULEUR ---> Facile, vous mettrez une couleur en anglais, par exemple Red. Cela changera la couleur du bouton.

TEXTE ---> Là aussi, pas difficile à comprendre.

2EME PARTIE :

<div id="fr1" style="display: none;"><iframe src="URL D'UN BLOG" width="X" height="X"></iframe></div>

URL D'UN BLOG ---> Vous mettrez le lien d'un blog.

Les X ---> Vous devez les remplacer par des valeurs. Cela désignera la hauteur et la largeur de la fenêtre qui s'ouvrira dans l'article quand vous cliquerez sur le bouton.

PETITS PLUS (pour éviter les question inutiles) :

Vous devrez remettre le code autant de fois que vous voulez mettre de boutons dans un article. La première partie du code a été programmé pour que vous puissiez mettre jusqu'à 3 boutons dans un article. Vous voyez le fr1 dans la deuxième partie ? Par exemple si vous mettez un deuxième bouton, vous devrez remplacer fr1 par fr2.

Si vous avez des question n'hésitez pas.