-
Spoiler
/!\ 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 ;)
Tags : div, this, texte, bouton, getelementsbytagname
-
Commentaires
Merci infiniment, Nagalia, pour ce code bien utile que je viens d'utiliser pour mon dernier défi. L'infobulle, je n'ai pas tout compris, j'ai utilisé un autre code.
Belle soirée à toi
Quelqu'un peut m'aider ? J'y arrive pas, ça marche pas (voir mon article "nouveautée" sur mesdollopz)
J'ai du mal a comprendre 0_0
Comment est-ce qu'on fait pour mettre une image dans le spoiler ?
Dans "TEXTE SPOILER" tu mets ton image. Si tu édite tout en html, tu met:
<img src="URL DE IMAGE" />
Bonjour ! Je voudrais savoir comment remplace-t-on le bouton par une image ? Comme ceci : http://ekladata.com/yAfnwLyKqotKaSc3ZIDvFGLqq6c/rf.png
Nagalia, je crois que tu as oublié de rajouter "px" après la sélection de la hauteur du bouton, sinon, woutiou, je pense qu'il faut faire pareil que pour mettre une image dans le contenu, donc, à la place de texte du bouton, tu met "<img src="URL DE IMAGE" />"
C'est pas excatement ça egotilt (à oui, j'ai zappé les px ^^')
Voilà le code complet pour mettre une image à la place du bouton<div class="quotetitle">
|<input class="nav" style="height: HAUTEUR DE L'IMAGE; width: LARGEUR DE L'IMAGEpx; 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'; }" src="URL_DE_IMAGE" type="image" />|
</div>
<div class="quotecontent">
<div style="display: none;">
Contenu
</div>
</div>
Change ce qui est souligné par tes valeurs ;)
Encore merci ! :D Je testerai demain (comme je l'ai dit je dirai le résult')
Et en fait dans :
quotetitle
On pourrait le transformer par :
.quotetitle { propriété : valeur ;}
Pour faire les bords en ombre par exemple (avant que j'essaye comme une malade)
Rien à dire, ça c'est du code, je ne maitrise pas encore celui-ci, mais ça va venir, enfin bon, merci! Je vais pouvoir l'apprendre comme ça! ^^
C'est bon, Nagalia je te remercie pour ce tuto, et encore à égotilt pour remplacer un bouton par une image ! It's magic !
La chiante est de retour ! \o/
J'ai essayer le code pour faire un spoiler avec une image,et sa marche ! :)
Mais quand j'essaye d'en faire un deuxieme en dessous du premier,et que je clique dessus .....ben il ouvre le spoiler d'en haut *-*
Faut faire quoi pour que sa marche normalement ? :O
Je pense qu'il faudrait changer le nom "quoquetitle" par autre nom. (je n'ai toujours pas testé xP)
Non mais j'ai juste dit que peut-être il faut changer le nom c'est tout ^^ A plus sur un autre article xD
Merci pour ce code, j'en ai vraiment besoin et enfin je trouve :3 | Toujours sur ton blog en plus .
Lunatic : Il faut envoyer un message "Stephanie" et lui demander de t'activer le java' (avec un peu de politesse quand même u_u)
Tu as juste à copier ce code et a changer les parties en rouges par ton propre texte ;)
<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>
J'aimerais savoir si on peux mettre un spoiler quand on créer un forum dans un sujet sur son blog eklablog?
Je pense que oui, du moment que ton javascript est activé sur ton blog.
Le mieux c'est d'essayer.
Ah bon ?! *n'avait toujours pas remarqué* je vais voir ça sur le mien et on en reparle après ...
Peut-être que si tu mets directement ça marche ?
Enfin, je sais pas, je pensais qu'y avait un bouton html ...
Sinon c'est qu'on ne peut pas ...
J'aurais quelques petites questions:
Peut-on "spoiler" depuis un texte et non un bouton ?
Et si oui, comment faire ?
Merci d'avance :)merci pour le code, jai complété avec ce ke dis Nagalia pour avoir bouton en image
et chez moi ça marche , c'est dans mon menu
je vais mettre un lien vers ce site , dommage jaurai bien voulu une banniere
bon week !!!
53Aide !Vendredi 20 Décembre 2013 à 06:00Cher Nagalia j'aimerais beaucoup savoir si tu avais le code pour masquer des rubriques comme sur ce blog :http://imaginationcreation.eklablog.com/
Cela me serais tres utile ,encore merci .
hey slt comment peut ont changer la vitesse de transition du spoiler j 'ai bo chercher je ne trouve pas merci
Bonjour, sachant que sa fait longtemps que je n'en ai plus mis je ne sais plus si on met le java dans les css ou comme un html
Le truc c'est que ça fait maintenant presque 2 mois que j'ai demandé le JS et que je ne l'ai toujours pas >.<
Coucou. J'ai dit:
" Bonjour, est-ce que vous pourriez activer le Java Script sur le blog concerné par le message ?
Merci d'avance !^^ "
Un truc comme ça je suis sûre que du " Merci d'avance !^^ " >.<
coucou patte de brume pour activer le JS sur t blogs tu doit faire une demande aupres d ekla il est desactiver car un mauvais code peut bloquer ton blog
si tu veut faire ta demande voici le lien http://www.eklablog.com/support
coucou alors cela ne ce met pas dans le css mais par exemple dans article en cliquant sur le bouton qui ressemble a ca < >
Merci beaucoup *qqqq*
Depuis le temps que je voulais faire des spoilers Q^^^^Q Merciiiii merci merci *^*
Bonjour, j'ai un code plus pratique pour le texte du bouton : Par exemple, le texte du bouton est marquée comme "text-bouttom". Une fois que le bouton a été cliquez 1 fois, le bouton est marquée comme "Afficher". Voila le code pour évitez ceci :
<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 = 'TEXTE DU BOUTON POUR LE CACHER'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'TEXTE DU BOUTON UNE FOIS QU'IL A ÉTÉ CLIQUEZ UNE FOIS'; }" type="button" value="TEXTE DU BOUTON LA PREMIÈRE FOIS" /></div>
<div class="quotecontent">
<div style="display: none;">
<p>TEXTE SPOILER</p>
</div>
</div>
</div>il faut coller le code dans la zone CSS , Javascript ou HTLM ?
-
Lundi 17 Octobre 2016 à 19:24
-
Merci, je vais demandé l'activation de mon java et je vais essayé http://le-blog-himesama.eklablog.com/accueil-c28993932
Ajouter un commentaire
Thanks.