• 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 =>

    Et magique!! Du texte apparaît!!! Bon, on peu mettre ce qu'on veut dedans (image, tableau....)

    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 Tags : , , , ,
  • Commentaires

    1
    EtoileSosso Profil de EtoileSosso
    Samedi 5 Novembre 2011 à 12:19

    Thanks.

    2
    Antea Profil de Antea
    Mercredi 18 Janvier 2012 à 19:08

    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

    3
    Mercredi 18 Janvier 2012 à 21:03

    L'infobulle me semble quand même plus simple à comprendre que le spoiler ^^'

    De rien =)

    4
    Vendredi 13 Avril 2012 à 10:42

    Moi ca marche que sur les modules et pas sur des pages :(

    5
    Dimanche 27 Mai 2012 à 15:40

    Quelqu'un peut m'aider ? J'y arrive pas, ça marche pas (voir mon article "nouveautée" sur mesdollopz)

    6
    Dimanche 27 Mai 2012 à 15:54

    J'ai compris pourquoi je n'y arrive pas ! Javascript n'est pas activé sur mon compte !

    7
    Kitty-Girly Profil de Kitty-Girly
    Vendredi 8 Juin 2012 à 21:24

    J'ai du mal a comprendre 0_0 

    Comment est-ce qu'on fait pour mettre une image dans le spoiler ?

    8
    Vendredi 8 Juin 2012 à 23:24

    Dans "TEXTE SPOILER" tu mets ton image. Si tu édite tout en html, tu met:

    <img src="URL DE IMAGE" />

    9
    Samedi 16 Juin 2012 à 14:04

    Ouawh merci :D

    10
    Vendredi 22 Juin 2012 à 08:31

    Bonjour ! Je voudrais savoir comment remplace-t-on le bouton par une image ? Comme ceci : http://ekladata.com/yAfnwLyKqotKaSc3ZIDvFGLqq6c/rf.png

    11
    Dimanche 24 Juin 2012 à 13:20

    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" />"

    12
    Lundi 2 Juillet 2012 à 20:48

    Ok merci je vais essayer et je vous dirai le résultat ! :)

    13
    Lundi 2 Juillet 2012 à 20:59

    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 ;)

    14
    Lundi 2 Juillet 2012 à 21:03

    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)

    15
    Lundi 2 Juillet 2012 à 21:21

    Regarde en bas de l'article ;)

    16
    Mardi 3 Juillet 2012 à 08:45

    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! ^^

    17
    Mardi 3 Juillet 2012 à 09:46

    Ah zut, je ne l'avais pas vu !!! :o *se prend une brique en pleine figure*

    18
    Kotsuki Saito Profil de Kotsuki Saito
    Mardi 3 Juillet 2012 à 15:18

    Merci! =D

    J'ai réussi même si il faut encore que j'attende l'activation de Java -.-

    19
    Mardi 3 Juillet 2012 à 15:41

    C'est bon, Nagalia je te remercie pour ce tuto, et encore à égotilt pour remplacer un bouton par une image ! It's magic !

    20
    MiYoi Profil de MiYoi
    Mercredi 4 Juillet 2012 à 08:32

    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 

    21
    Mercredi 4 Juillet 2012 à 09:00

    Je pense qu'il faudrait changer le nom "quoquetitle" par autre nom. (je n'ai toujours pas testé xP)

    22
    MiYoi Profil de MiYoi
    Mercredi 4 Juillet 2012 à 09:08

    Merci *o* 

    Mais je le remplace par quel nom ? xP 

    23
    Mercredi 4 Juillet 2012 à 09:11

    Bah comme "bisous" ou "spoiler" ou "essai" etc... x)

    24
    MiYoi Profil de MiYoi
    Mercredi 4 Juillet 2012 à 09:19

    Ah ok x) 

    Bon faut pas Spoiler ici,sinon j'vais encore me faire gronder par Nagi' 8'DD

    25
    Mercredi 4 Juillet 2012 à 09:38

    Non mais j'ai juste dit que peut-être il faut changer le nom c'est tout ^^ A plus sur un autre article xD

    26
    MiYoi Profil de MiYoi
    Mercredi 4 Juillet 2012 à 09:41

    Ok x3 

    27
    Jeudi 2 Août 2012 à 12:00

    Merci pour ce code, j'en ai vraiment besoin et enfin je trouve :3 | Toujours sur ton blog en plus .

    28
    Samedi 11 Août 2012 à 14:08

    Que faut t-il faire pour activer le Javascript svp ?

    29
    Samedi 11 Août 2012 à 14:33

    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)

    30
    Samedi 11 Août 2012 à 14:52

    De rien :D

     

    31
    Samedi 11 Août 2012 à 14:53

    Okay merci =)

    (Ben oui, c'est la moindre des choses u_u)

    32
    Samedi 11 Août 2012 à 14:54

    Je peux la contacter où ? ._.

    33
    Samedi 11 Août 2012 à 15:05

    Sur la page d'accueil eklablog tout en bas il y a "aide" et "contacter le support" ^^

    34
    Samedi 11 Août 2012 à 15:09

    Ou alors dans tes messages, non ?

    35
    Samedi 11 Août 2012 à 15:14

    C'est mieux d'aller à la page d'accueil et de contacter le support ^^

    36
    Samedi 11 Août 2012 à 15:16

    Oki ^^

    37
    Samedi 11 Août 2012 à 15:16

    Okay, merci :D

    38
    Samedi 25 Août 2012 à 22:25

    je suis un extraterrestre (ooh) je pige rien O.o  

    39
    Samedi 25 Août 2012 à 22:27

    (ouf) 

    40
    Samedi 25 Août 2012 à 23:30

    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>

    41
    Dimanche 26 Août 2012 à 11:11

    ah daccord bon je vais essayer je vous direz des nouvelles

    42
    Dimanche 26 Août 2012 à 11:18

    enfaite comment on crée un bouton on va ou ?

    43
    Dimanche 26 Août 2012 à 11:40

    laisssé tomer j'ai réussi merci a toi nagalia bon courage pour la suite

    44
    LadyStrawberry Profil de LadyStrawberry
    Vendredi 31 Août 2012 à 13:22

    J'aimerais savoir si on peux mettre un spoiler quand on créer un forum dans un sujet sur son blog eklablog?

    45
    Vendredi 31 Août 2012 à 14:57

    Je pense que oui, du moment que ton javascript est activé sur ton blog.

    Le mieux c'est d'essayer.

    46
    LadyStrawberry Profil de LadyStrawberry
    Vendredi 31 Août 2012 à 15:01

    mais sur le sujet d'un forum il n' y a pas le bouton HTLM :$

    47
    Vendredi 31 Août 2012 à 15:07

    Ah bon ?! *n'avait toujours pas remarqué*  je vais voir ça sur le mien et on en reparle après ...

    48
    Vendredi 31 Août 2012 à 15:08

    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 ...

    49
    LadyStrawberry Profil de LadyStrawberry
    Vendredi 31 Août 2012 à 21:42

    j'ai essayé mais après je ne peux plus éditer mon sujet :$

    50
    Samedi 1er Septembre 2012 à 06:56

    C'est vraiment bizarreles forums eklablog ...

    Enfin, c'est pas eklaforum non plus - -'

    51
    Lucky-Charm Profil de Lucky-Charm
    Samedi 1er Septembre 2012 à 11:45

    J'aurais quelques petites questions:
    Peut-on "spoiler" depuis un texte et non un bouton ?
    Et si oui, comment faire ?
    Merci d'avance :)

    52
    Samedi 12 Octobre 2013 à 16:09

    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 !!!

    53
    Aide !
    Vendredi 20 Décembre 2013 à 06:00

    Cher 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 .

    54
    Dimanche 23 Mars 2014 à 18:46

    hey slt comment peut ont changer la vitesse de transition du spoiler j 'ai bo chercher je ne trouve pas merci

    55
    Mercredi 2 Avril 2014 à 18:45

    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

    56
    Jeudi 3 Avril 2014 à 21:05

    Toujours dans le HTML ;)

    57
    Jeudi 3 Avril 2014 à 21:54

    super merci de ta réponse pourrais-tu me  faire  un exempme car j'ai essayé mais sans succès 

    58
    Dimanche 22 Juin 2014 à 11:58

    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 >.<

    59
    Dimanche 22 Juin 2014 à 12:21

    salut patte de brume quel etait ta question peut etre je peut t'aider

    60
    Lundi 23 Juin 2014 à 12:41

    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 !^^ " >.<

    61
    Lundi 23 Juin 2014 à 12:57

    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

    62
    Lundi 23 Juin 2014 à 13:16

    Oui, c'est là que je l'ai faite, mais merci quand-même, je vais ré-essayer :)

    63
    Lundi 23 Juin 2014 à 13:37

    as tu essayer de mettre un script ?

     

    64
    Mardi 24 Juin 2014 à 18:59

    oui, dans le CSS, mais ça n'a pas marché

    65
    Mardi 24 Juin 2014 à 21:28

    coucou alors cela ne ce met pas dans le css mais par exemple dans article en cliquant sur le bouton qui ressemble a ca < >

    66
    Mercredi 25 Juin 2014 à 09:03

    aaaaaaaaaaaaaaaaah d'accooooooord merci beaucoup :3

    67
    Jeudi 14 Août 2014 à 00:25

    Bonjours, est-il possible de mettre un spoiler dans un tableau ?

    68
    Dimanche 7 Septembre 2014 à 11:23

    Merci, je vais essayé ^^

    69
    Samedi 4 Octobre 2014 à 14:08

    Merci beaucoup *qqqq*

    Depuis le temps que je voulais faire des spoilers Q^^^^Q Merciiiii merci merci *^*

    70
    Jeudi 11 Décembre 2014 à 17:52

    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>

    71
    Dimanche 16 Octobre 2016 à 10:33

    il faut coller le code dans la zone CSS , Javascript ou HTLM ? 

      • Lundi 17 Octobre 2016 à 19:24

        Bonjour Levi_kun !

        Je me permet de répondre à ton message à la place de Nagalia....

         

        Pour le premier code, il faut copier ça dans la zone HTML.

        Pour le reste, il faut copier ça dans la zone CSS.

         

        Cordialement, Guillaume24.

    72
    Vendredi 16 Décembre 2016 à 22:27
    Merci, je vais demandé l'activation de mon java et je vais essayé http://le-blog-himesama.eklablog.com/accueil-c28993932
    73
    Dimanche 23 Septembre 2018 à 20:53

    merci pour le code, ça m'a bien aidé.:)

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :