Sujet Précédent Sujet Suivant

[Spoiler] HTML

Résolu/Fermé
Pingson Messages postés 375 Date d'inscription jeudi 5 mai 2005 Statut Membre Dernière intervention 30 août 2006 - 1 mars 2006 à 20:53
 Cissy - 22 déc. 2017 à 09:14
Salut!

Je voudrais savoir quel est le code pour faire un spoiler comme ceci:

http://forum.hardware.fr/hardwarefr/JeuxVideo/Ouverture-facile-aides-pour-passer-niveaux-Lire-post-sujet-86813-2.htm

Mais pas sur un forum

Merci
A voir également:

31 réponses

  • 1
  • 2
Réponse 1 / 31
takerman
9 déc. 2007 à 02:10
Voici un spoiler qui devrais bien fonctionner: 

<div 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;">{TEXT}</div></div></div>


il faut juste modifier {text} par votre texte
54
dieurdieuf Messages postés 5 Date d'inscription vendredi 29 février 2008 Statut Membre Dernière intervention 15 septembre 2010 2
1 juin 2009 à 12:55
Bonjour et merci pour l'astuce, Takerman.

Ton code fonctionne nickel sur Blogger ! ;)

0
lord-pi
11 sept. 2010 à 14:50
Je sais pas pour vous, mais chez moi elle ne marche pas sur blogger ='(
0
dieurdieuf Messages postés 5 Date d'inscription vendredi 29 février 2008 Statut Membre Dernière intervention 15 septembre 2010 2
15 sept. 2010 à 10:47
Bonjour Lord-Pi.

Tu trouveras une illustration sur cette page.

http://dieurdieuf.blogspot.com/2009/07/attention-sur-msn.html

Voici le code utilisé. 

<div style="margin: 5px 20px 20px;"><div class="quotetitle"><b>Spoiler : </b> <input value="Afficher" style="margin: 0px; padding: 0px; width: 50px; font-size: 10px;" 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"></div><div class="quotecontent"><div style="display: none;"> <a href="https://imageshack.com/" target="_blank"><img style="width: 201px; height: 115px;" src="http://img412.imageshack.us/img412/415/livemessenger.jpg" border="0" alt="Attention" /></a>  </div></div></div>


Il faut remplacer la partie en gras par le texte, image ou média que tu souhaites afficher en spoiler.

Bonne journée.
0
Mademoiselle
25 nov. 2011 à 17:51
Salut, j'ai essayé, disons j'ai vue des spoiler avec des image?!
0
julie
8 mai 2013 à 19:18
bonjour,
voila je voudrai mettre un spoiler sur mon blog wordpress

style sur un billet par exemple je pose une devinette, et la reponse est cachée

je n'y arrive pas, j'ai essayé vos codes, yen a un qui marche mais qu'en visuel, et pas sur le billet

que puis je faire ?
avec mes remerciements
0
Réponse 2 / 31
math 2000 Messages postés 2579 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 404
22 mai 2009 à 09:02
un peu long vos code pour ceux qui veulent plus court j'en ai 2
celui là 
<div class="c1" onclick="javascript:montrer_spoiler('spoiler2')"><strong>spoiler</strong>
<script type="text/javascript">
function montrer_spoiler(value){var actual=document.getElementById(value).style.visibility;if (actual=='visible'){document.getElementById(value).style.visibility='hidden';}else{document.getElementById(value).style.visibility='visible';}} </script>
<dl style="visibility: hidden;" id="spoiler2">
<dd>texte c<br>
</dd>
</dl>  
</div>
ou lui 


<div class="c1"
 onclick="pchild=this.getElementsByTagName('p'); if(pchild[0].style.visibility!='hidden'){pchild[0].style.visibility='hidden'; pchild[0].style.height='0';}else{pchild[0].style.visibility=''; pchild[0].style.height=''}">Spoiler
<p style="">texte<br>
cach<br>
cach<br>
cach<br>
</p>
</div>
12
crocoscore
31 mai 2009 à 10:35
Vous avez aussi:

Avec une case à cocher:
<div><div class="quotetitle"><input type="checkbox" value="Afficher" style="width:98%;font-size:20px;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;">

Avec un bouton:
<div><div class="quotetitle"><input type="button" value="Afficher" style="width:98%;font-size:20px;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;">

Enjoy it!
0
Réponse 3 / 31
math 2000 Messages postés 2579 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 404
12 avril 2009 à 17:39
j'ai encore plus court source mon site http://bormat2.free.fr/wordpress4/ 

<div class="c1" onclick="javascript:montrer_spoiler('spoiler2')"><strong>spoiler</strong>
<script type="text/javascript">
function montrer_spoiler(value){var actual=document.getElementById(value).style.visibility;if (actual=='visible'){document.getElementById(value).style.visibility='hidden';}else{document.getElementById(value).style.visibility='visible';}} </script>
<dl style="visibility: hidden;" id="spoiler2">
<dd>texte c<br>
</dd>
</dl>
</div>

vous avez aussi des spoilesr compressable
6
Réponse 4 / 31
Anonyme
6 sept. 2009 à 03:08
<div 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;">{moi sa marche pas aussi faut m'expliquer avec des mots clair svp}</div></div></div>
4
Anonyle_remerciant
19 avril 2011 à 13:03
Sa c parfait !!!
0
anonyme reconnaissant
19 mars 2012 à 17:11
excellent
0
bber51
13 avril 2012 à 11:18
super je viens de lester, sur blogger, je vais enfin pouvoir alléger mes pages un grand merci.
0
gwenm Messages postés 591 Date d'inscription lundi 6 octobre 2008 Statut Membre Dernière intervention 11 février 2016 30
4 mai 2012 à 19:12
Salut, super ce script ;) Quel bout de script doit on intégrer à la fin du texte quand celui-ci est long, pour le refermer ?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 31
math 2000 Messages postés 2579 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 404
20 mars 2009 à 21:57
désolé mon lien à des problème voici où il a été déplacer il y a tous sur les spoiler et les menu déroulant
http://bormat2.free.fr/tutoriel-menu-déroulant.html
3
Réponse 6 / 31
Takerman
21 août 2007 à 18:40
pour ajouter se code dans la pages html fait comme ceci:

========================================================= 

<script type="text/javascript">
function montrer_spoiler(value) {
	var actual=document.getElementById(value).style.visibility;
	if (actual=='visible') {
		document.getElementById(value).style.visibility='hidden';
	} else {
		document.getElementById(value).style.visibility='visible';
	}
}
</script>
<div class="container"><table class="spoiler" onclick="javascript:montrer_spoiler('spoiler2')" style="cursor: pointer;"><tbody><tr class="none"><td><b class="s1Topic">Spoiler :</b><br><br><div class="Topic masque" id="spoiler2">{TEXT}
</div></td></tr></tbody></table></div>



=========================================================

puis il faut modifier {TEXT} par le texte que tu veut
1
Réponse 7 / 31
lecky
24 août 2007 à 19:00
up please :(
1
Réponse 8 / 31
glouton
28 août 2007 à 00:37
C'est parce que l'état initial n'est pas contenu dans le javascript mais dans la classe CSS. Le javascript lui change l'état de la propriété CSS "visiblility" en fonction de l'état précédent. Personnellement j'utiliserais plutôt la propriété display en passant de block à none. Visibility de visible à hidden ne fait que maquer le contenu mais sa place dans l'affichage lui reste réserver, alors qu'avec display, quand tu passes la valeur à none, c'est comme si le truc n'était plus là du tout.
Dans l'exemple précédent que j'ai regardé rapidemment, l'état initial est donc défini dans la classe CSS "container". Si tu ne la définis pas, par défaut, la proprité visibility est à visible.

Voilou
glouton
1
Réponse 9 / 31
Letithord Kage
24 févr. 2008 à 23:20
j'ai réglé le problème de lpareo

voici le bon code :

<script type="text/javascript">
function montrer_spoiler(value) {
var actual=document.getElementById(value).style.visibility;
if (actual=='visible') {
document.getElementById(value).style.visibility='hidden';
} else {
document.getElementById(value).style.visibility='visible';
}
}
</script>
<div class="container"><table class="spoiler" onclick="javascript:montrer_spoiler('spoiler2')"
style="cursor: pointer;"><tbody><tr class="none"><td><b class="s1Topic"> On clique sur ce texte pour afficher le reste !!! </b><br><br>
<div class="Topic_masque" id="spoiler2">

Texte

</div></td></tr></tbody></table></div>

et dans ton fichier css, ou directement dans le fichier html ou php, en rajoutant une balise css tu met

.topic_masque

{
visibility: hidden;
}

voila, et c'est pas de moi, j'ai pris le code de takerman qui date du 21 aout 2007, et j'ai passé 5 minutes a tester différents noms de class pour le css.

il affichera le nom en gras et centré, il y aura une plage invisible aussi longue que ton texte caché, et quand tu cliqueras, ca l'affichera en centré

ce code est pratique pour les cas ou il n'y a qu'une ou deux lignes a afficher
mais pour un cas ou il y a une page entière, mieux vaux prendre celui de takerman du 9 décembre 2007.
meme si il y a un léger bug (il n'affiche en effet rien quand tu cliques sur le bouton, je vais essayer de régler ca, meme si je ne m'y connais pas en codage java
voila
1
Réponse 10 / 31
math 2000 Messages postés 2579 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 404
1 mars 2009 à 10:46
http://sd-1.archive-host.com/membres/up/150114153040225939/66.HTM
la dernière réponse date de 2008 donc pas encore trop tard
avec le java script et le html ça ne fait que 5,74 ko à la place de 14 ou +
1
Réponse 11 / 31
math 2000 Messages postés 2579 Date d'inscription dimanche 9 septembre 2007 Statut Membre Dernière intervention 7 mai 2016 404
6 sept. 2009 à 09:19
spoiler n'est pas activer sur ccm essayé sur d'autre site ça marche
1
Réponse 12 / 31
Maxoen
20 nov. 2010 à 14:42
Bonjour je souhaiterai savoir si possible comment adapter ce script pour l'exécution de plusieurs spoilers dans la même page.

Merci.
1
Réponse 13 / 31
sophie1998 Messages postés 152 Date d'inscription mardi 27 octobre 2009 Statut Membre Dernière intervention 20 décembre 2012 34
28 avril 2011 à 18:26
Tu mets le messages que tu veux citer, et tu clique en haut à droite normalement sur "citer", c'est tout! ^^
1
Réponse 14 / 31
Pingson Messages postés 375 Date d'inscription jeudi 5 mai 2005 Statut Membre Dernière intervention 30 août 2006 4
2 mars 2006 à 11:51
ok mais comment on en fais un ??!!??
0
Réponse 15 / 31
Jean-François Pillou Messages postés 18707 Date d'inscription lundi 15 février 1999 Statut Webmaster Dernière intervention 16 février 2023 63 266
2 mars 2006 à 11:57
... regarde le code du forum : 

<div class="container"><table class="spoiler" onclick="javascript:montrer_spoiler('spoiler2')" style="cursor: pointer;"><tbody><tr class="none"><td><b class="s1Topic">Spoiler :</b><br><br><div class="Topic masque" id="spoiler2"><p>escargot</p></div></td></tr></tbody></table></div>


La fonction Javascript associée n'est pas bien méchante :
http://forum.hardware.fr/include/forum2.js 

function montrer_spoiler(value) {
	var actual=document.getElementById(value).style.visibility;
	if (actual=='visible') {
		document.getElementById(value).style.visibility='hidden';
	} else {
		document.getElementById(value).style.visibility='visible';
	}
}
0
Réponse 16 / 31
Pingson Messages postés 375 Date d'inscription jeudi 5 mai 2005 Statut Membre Dernière intervention 30 août 2006 4
2 mars 2006 à 12:47
ok merci :D
0
Réponse 17 / 31
lecky
23 août 2007 à 10:41
Salut,
ce code marche sur mon forum seulement, il est d'abord visible puis il faut cliquer dessus pour le rendre invisible.
J'aime savoir comment faire pour qu'il soit invisible la première fois qu'on le voit ?
j'ai remplacé "actual visible" par hidden" mais ça ne marche plus comme ça ...
merci
0
Réponse 18 / 31
Torak
16 juin 2008 à 00:14
bonjour a tous, je vois que vous avez de bonne connaissance
alors voila, tout ces spoiler son bien jolie mais ce que je recherche n'y ai pas exactement ...
je cherche un spoilé comme présent sur ce forum :
http://xooit.xooit.com/t34946-Mettre-vos-sous-sous-forum-en-lien-cache-hide-spoiler.htm?q=spoiler

un spoiler qui se déplie progressivement, et non un texte qui apparait d'un coups, et qui ne fait pas de gros troues dans l'affichage de la page..
en quelque sorte se serait le top du spoiler non ? :)

j'ai esseyé de reprendre le code, en très gros le code ressemble a ça non ?

<div><a href="javascript:void(0);"
onclick="hideBBCodeShowHide(this)">Spoiler  : </a></div>
<div style="display: none;">
TEXTE
<span class="postbody"></span></div>
</div>

serait il possible de l'appliquer a une page web ? parce que tel quel le texte ne s'affiche pô !
merci ;)
0
Réponse 19 / 31
nenah
27 juin 2008 à 13:49
peut-être n'as-tu pas inclu dans ta page la fonction javascript hideBBCodeShowHide()...

j'ai récupéré dans le code source de ta page d'exemple le fichier .js contenant la fonction en question (http://img3.xooimage.com/files/c/1/5/common-424e3c.js?2_20080531)...mais c'est un vrai capharnaum pour y comprendre quelque chose. Au pire enregistres le .js en entier et utilises-le tel quel.

J'ai reussi en tatonnant a  virer quelques trucs n'ayant pas de rapport avec la fonction de "spoilerization", mais une grande partie reste opaque pour moi : la fonction hideBBCodeShowHide() fait appel à  2 autres fonctions Effect.SlideDown et Effect.SlideUp, mais après je m'y perds. Voilà , en espérant avoir pu t'aider un peu.
0
hounaa
29 juil. 2008 à 21:55
Hey =)

Je voulais signaler que le code de takerman marche très bien =)
et je le remercie pour ce code =D
0
Réponse 20 / 31
lu
1 nov. 2008 à 18:00
lu

<div class="container"><table class="spoiler" onclick="javascript:montrer_spoiler('spoiler2')" style="cursor: pointer;"><tbody><tr class="none"><td><b class="s1Topic">Spoiler :</b><br><br><div class="Topic masque" id="spoiler2"><p>escargot</p></div></td></tr></tbody></table></div>
0
*xan*
12 avril 2009 à 15:27
Le code de takerman fonctionne effectivement très bien.

Merci beaucoup pour le coup de pouce.
0

Discussions similaires

&nbsp ; Quelle Fonction ?
-Jeff- -
sl4ck -

14 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
Image cliquable dans html
pau -
efS -

5 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses