Mode secret <spoiler> plusieurs fois sur une page

Sujet résolu

Anonyme

8 novembre 2008 à 21:22:45

Salut,

Je voulais savoir comment on fait pour mettre le mode secret sur une seule page mais sur plusieurs chose.
Car la sa marche pas regarder sur mon lien. (le code dessous)

http://dragonblack95.free.fr/multimedia/musiques.php

<script type="text/javascript">
				
function secret(secretId){
	var element = document.getElementById(secretId);
	element.style.display = (element.style.display == 'none' ? '' : 'none');
}

  </script>

Qui peut m'aider svp ??

Merci d'avance !

Blogiwi

9 novembre 2008 à 0:19:11

Tu dois mettre un id différent pour chaque div à cacher/afficher

Anonyme

9 novembre 2008 à 1:05:41

J'ai mis un id en html ou il y a la chose a cacher mais je sais pas rajouter sa dans le code montre plus haut.

Elias le Vert

9 novembre 2008 à 8:22:23

C'est l'appel de la fonction et l'id des div que tu dois modifier, tu n'as rien besoin de modifier dans la fonction. Actuellement, toutes tes div masquées ont "cache" comme id, et tous tes liens servent à les afficher appellent "secret('cache');". Tu dois donner un id différent à chaque div et mettre le bon id dans chaque appel de fonction sur les liens.

TheBidi

9 novembre 2008 à 21:43:06

Un ID différent à chaque fois, c'est plutôt lourd je pense (à faire et à gérer je veux dire). Il doit y avoir moyen de faire ça plus simplement avec this je pense...

function switchSecret ( link ) {
	if ( link.parentNode.className == 'secretshow' ) {
		link.parentNode.className = 'secrethide';
		link.innerHTML = 'Secret - Cliquez pour afficher';
	} else {
		link.parentNode.className = 'secretshow';
		link.innerHTML = 'Secret - Cliquez pour masquer';
	}
}

Avec une box comme ça :

<div class="secret hide"><a href="#" onclick="javascript:switchSecret ( this ); return false;">Secret - Cliquez pour afficher</a>
    <div class="secret1">
        <!-- Ici le truc secret -->
    </div>
</div>

Et pis un pet de css du genre :

div.secret, div.secretshow, div.secrethide {
	/* On met en forme */
	border: 1px dashed blue;
	margin: 30px;
	padding: 10px;
}

/* Si JS activé */
div.secret div.secret1 {
/* Avec JS activé, on masque par défaut */
	display: none;
}

/* JS est désactivé */

body.nojs div.secret div.secret1 {
/* Par défaut, on affiche au cas ou on a pas JS activé */
	display: block;
}

div.secret div.secret1 {
	display: none;
}

/* Dans tous les cas */
div.secretshow div.secret1 {
	display: block;
}

div.secrethide div.secret1 {
	display: none;
}

On teste si JS est activé avec :

function isJsEnabled ( ) {
    var b = document.getElementsByTagName ( 'body' );
	b.item(0).className = '';
}

<body class="nojs" onload="javascript: isJsEnabled ( );">

C'est pas testé, mais je pense que ça devrait le faire

Dis-m'en des nouvelles.

EDIT : Ce coup ci ça devrait marché. J'ai simplifié le tout en n'utilisant plus les multi-classes (div.secret.show/div.secret.hide). Ca simplifiait peut-être à la mise en forme avec CSS, mais c'était plus galère côté JS. Du coup, il suffit de classer les trois

Test ici

Anonyme

9 novembre 2008 à 23:10:01

Salut, sa marche pas http://dragonblack95.free.fr/multimedia/musiques.php#

TheBidi

9 novembre 2008 à 23:11:54

Je suis sensé voir quoi ?

PS : T'as vu que le code a été modifié ?

Anonyme

9 novembre 2008 à 23:17:53

Quand je clique sur le titre sa marche pas.

PS : oui j'ai vue le code modifier.

TheBidi

9 novembre 2008 à 23:23:12

Mon FireBug me dit que la fonction isJsEnabled n'est pas définie... Donc soit tu t'es planté dans le nom (définition ou appel), soit elle est pas définie du tout.

Anonyme

9 novembre 2008 à 23:46:12

code de ma page ou sa je me suis planter :

body

<center><p><b><div class="secret hide"><a href="#" onclick="javascript:switchSecret ( this ); return false;">OST : 1</a></b><br>
    <div class="secret1">
<img src="/image/ost/ost_1.jpg" border="1px solid black" width="175px" height="175px" /><br>
>><a href="/downloads/yu_yu_hakusho_ost_1.rar">Download OST 1</a><<<br><br>

Title	Yu Yu Hakusho OST I<br>
Year	1997<br>
Code	PCCG-388<br>
Genre	Anime<br>
Time	41:13<br><br>

1	hohoeminobakudan ~ mawatarimatsuko - Matsuko Mawatari - 4:12<br>
2	Yuusuke's Theme		                                    - 3:09<br>
3	Tatakai no Toki		                                    - 3:05<br>
4	Hiei's Theme		                                    - 2:58<br>
5	Kurama's Theme		                                    - 3:15<br>
6	Kuwarabara's theme		                                - 3:00<br>
7	Koenma's Theme                                  		- 3:24<br>
8	Botan's Theme		                                    - 3:23<br>
9	Time Limit		                                        - 2:55<br>
10	Monster Suit		                                    - 4:01<br>
11	Romantic		                                        - 3:03<br>
12	Homework ga Owaranai	           - Matsuko Mawatari - 4:48<br><br>

    </div>
</div>



<b><div class="secret hide"><a href="#" onclick="javascript:switchSecret ( this ); return false;">OST : 2</a></b><br>
<div class="secret2">
<img src="/image/ost/ost_2.jpg" border="1px solid black" width="175px" height="175px" /><br>
>><a href="/downloads/yu_yu_hakusho_ost_2.zip">Download OST 2</a><<<br><br>

Title	Yu Yu Hakusho OST 2<br>
Year	1997<br>
Code	PCCG-392<br>
Genre	Anime<br>
Time	39:53<br><br>

1	Hohoemi No Bakudan		                               - 3:30<br>
2	Makai No Tobira		                                    - 2:09<br>
3	Yuusuke's Powerup		                                - 3:57<br>
4	Yurusenee!		                                        - 3:02<br>
5	Sensui's Territory		                                - 3:25<br>
6	Sentou Kaishi		                                    - 2:22<br>
7	Taiketsu		                                        - 3:13<br>
8	Inochi O Kakete		                                    - 3:57<br>
9	Tatakai No Hate		                                    - 3:40<br>
10	Subete Ga Owatta		                                - 2:45<br>
11	Ashita Ni Mukatte		                                -4:04<br>
12	Unbalance Na Kiss Wo Shite		                        - 3:49<br><br>
    </div>
</div>

<b><div class="secret hide"><a href="#" onclick="javascript:switchSecret ( this ); return false;">OST : Yu Yu Hakusho Saikyou Best Selection</a></b><br>
<div class="secret3">
<img src="/image/ost/yu_yu_hakusho_ saikyou_best_ selection.jpg" border="1px solid black" width="175px" height="175px"/><br>
>><a href="">Download OST 3</a><<<br><br>

Title	Yu Yu Hakusho Saikyou Best Selection<br>
Year	1997<br>
Code	PCCG-399<br>
Genre	Anime<br>
Time	74:52<br><br>

1	Hohoemi no Bakudan	                  - Matsuko Mawatari - 4:13<br>
2	Dead or Alive	                      - S-Yusuke - 4:59<br>
3	Koori no Naifu o Daite	              - Kurama - 4:43<br>
4	Kuchibue ga Kikoeru	                  - Hiei - 4:37<br>
5	Anbaransu na kiss wo Shite	          - Hiro Takahashi - 3:51<br>
6	Sayonara Bye bye	                  - Matsuko Mawatari - 4:29<br>
7	Taiyou ga mata Kagayatoki	          - Hiro Takahashi - 5:22<br>
8	Ryusei no Solitude	                  - Hiei - 5:13<br>
9	Sayonara wa Mirai no Hajimari	      - Kurama -  5:45<br>
10	Eien no Thankyou	                  - Kuwabara - 4:43<br>
11	All Right!!	                          - Yuusuke - 4:25<br>
12	Eye to Eye	                    - Hiei, Kurama, Kuwabara - 3:59<br>
13	Wild Wind	                          - Hiei, Kurama -  4:21<br>
14	Homework Ga Owaranai	              - Matsuko Mawatari - 4:51<br>
15	Daydream Generation	                  - Matsuko Mawatari - 4:13<br>
16	Bokutachi no Kisetsu - Hiei, Yuusuke, Kurama, Kuwabara - 5:08<br><br>
    </div>
</div>

<b><div class="secret hide"><a href="#" onclick="javascript:switchSecret ( this ); return false;">OST : Yu Yu Hakusho Super Dance Mix</a></b><br>
<div class="secret4">
<img src="/image/ost/yu-yu_hakusho super_dance_mix.jpg" border="1px solid black" width="175px" height="175px" /><br>
>><a href="">Download OST 4</a><<<br><br>

Title	Yu Yu Hakusho Super Dance Mix<br>
Year	1996<br>
Code	MRCA-20086<br>
Genre	Anime<br>
Time	67:04<br><br>

1	DJ Track 01		                                        - 2:59<br>
2	Hohoemi no Bakudan	                  - Mawatari Matsuko - 4:33<br>
3	DJ Track 02		                                        - 3:13<br>
4	All Right!	                         -  Yusuke - 4:37<br>
5	DJ Track 03		                                       - 0:59<br>
6	Wild Wind	                          - Hiei & Kurama - 4:40<br>
7	Koori no Naifu o Daite	               -Kurama - 5:06<br>
8	DJ Track 04		                                       - 3:40<br>
9	Moonlight Party	                       -Koenma & Botan - 5:18<br>
10	DJ Track 05		                                       - 3:00<br>
11	Kuchibue ga Kikoeru	                   -Hiei - 5:02<br>
12	Eye to Eye	                  - Kuwabara, Hiei, Kurama - 3:54<br>
13	DJ Track 06		                                       - 2:34<br>
14	Dachi	                              - Kuwabara - 3:49<br>
15	DJ Track 07		                                       - 1:21<br>
16	Dead or Alive	                      - Yusuke -  5:19<br>
17	DJ Track 08		                                        - 2:32<br>
18	Anbaransu na Kiss wo shite	         -  Takahashi Hiro - 4:28<br><br>
    </div>
</div>


</p></center>

head

<script type="text/javascript">
				
function switchSecret ( link ) {
	if ( link.parentNode.className == 'secretshow' ) {
		link.parentNode.className = 'secrethide';
		link.innerHTML = 'Secret - Cliquez pour afficher';
	} else {
		link.parentNode.className = 'secretshow';
		link.innerHTML = 'Secret - Cliquez pour masquer';
	}
}


  </script>

Anonyme

15 novembre 2008 à 19:51:28

Qui peut m'aider svp ??

Merci d'avance !