Discussion :

[toto81]

Salut tout le monde !

Je viens voir si quelqu'un peut m'aider sur la modification d'un script java. En gros j'ai ce menu:

http://realia.jimdo.com/enrichir-le-...ynamique/#demo

Ce que je voudrais faire c'est, en cliquant sur une question elle ferme automatiquement les autres qui sont ouvertes.

Voici le code head:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<script type="text/javascript">
//<![CDATA[
function Show(id){
document.getElementById(id).style.display = "";
}
function Toggle(id){
var o = document.getElementById("ans"+id);
if(o.style.display == "") o.style.display = "none"; else o.style.display = "";
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
 
/* Style n°1 de FAQ */
 
.cadrefaq { 
padding: 10px;
margin: 5px;
color: #FFFFFF; /* couleur du cadre de la rubrique et du titre */
background-color: none; /* pas de fond coloré */
border: 2px solid #28A600; /* une bordure colorée */
}
 
.titrefaq { 
font-size: 17px; /* taille du titre de la rubrique */
font-weight: bold; /* titre en gras */
font-family: verdana;
}
 
a.qfaq { 
display: inline-block;
text-decoration: none;
padding: 2px 5px;
margin: 3px;
font-size: 15px;
font-weight: bold;
font-family: verdana;
color: #FFFFFF; /* couleur de la question */
border: 0px; /* pas de bordure */
background-color: #28A600; /* couleur de fond de la question */
/* les lignes qui suivent dessinent l'arrondi du fond de la question */
border-radius: 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
-o-border-radius: 0px;
}
 
.rfaq {
padding: 3px;
margin: 3px;
font-size: 15px;
font-family: verdana;
color: #FFFFFF; /* couleur du texte de la réponse */
border: 0px; /* pas de bordure */
background-color: #b4b4b4; /* pas de couleur de fond */
}
 
/*]]>*/
</style>

Et voici le code de la page qui affiche ma FAQ:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<fieldset class="cadrefaq">
<legend class="titrefaq">Commande</legend>
 
<!-- bloc 1 -->
<a href="javascript:Toggle(1)" class="qfaq">Pourrais-je jouer avec mon compte après mon paiement?</a><br />
<div id="ans1" class="rfaq" style="display:none;">
    Oui, nous vous previendrons par skype ou directement en jeu pour vous prevenir que nous allons nous connecter avec votre compte.
</div>
 
<!-- bloc 2 -->
<a href="javascript:Toggle(2)" class="qfaq">Puis-je jouer moi même pendant le boost?</a><br />
<div id="ans2" class="rfaq" style="display: none;">
    Normalement non mais ca peut être négocier avec les joueurs en fonction de votre niveau de jeu. Il pourrait y avoir un complement à faire au niveau du paiement.
</div>
 
<!-- bloc 3 -->
<a href="javascript:Toggle(3)" class="qfaq">Je viens de payer et maintenant?</a><br />
<div id="ans3" class="rfaq" style="display: none;">
    Nous allons vérifier le paiement et une fois celui ci validé, nous vous contacterons par mail ou par skype (vocal si vous le souhaitez) pour vous expliquer comment nous allons procéder.
</div>
 
<!-- bloc 4 -->
<a href="javascript:Toggle(4)" class="qfaq">J'ai reçu un mail me disant que mon compte est bloqué !</a><br />
<div id="ans4" class="rfaq" style="display: none;">
    Pas de panique, c'est tout à fait normal. Blizzard a imposé une sécurité via l'IP client, quand quelqu'un se connecte sur votre compte via une autre adresse IP, il bloque le compte jusqu'à votre validation de connexion par mail.
</div>
 
</fieldset>

J’espère ne pas m’être trompé de section

Merci d'avance !

[Auteur]

bonjour,

script java.

ne confonds pas java et javascript. Ce sont 2 langages différents. Ton problème est un problème javascript.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="javascript:Toggle(1)" class="qfaq">Pourrais-je jouer avec mon compte après mon paiement?</a>

évite les pseudos url. Remplace tes liens par :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<span onclick="Toggle(1)" class="qfaq">Pourrais-je jouer avec mon compte après mon paiement?</span>

Le paramètre de ta fonction Toggle passe le sous la forme de chaines de caractères :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="Toggle('1')"

Ce que je voudrais faire c'est, en cliquant sur une question elle ferme automatiquement les autres qui sont ouvertes.

Dans ta fonction Toggle, avant d'afficher le contenu visé, réalise une boucle en faisant un display="none" sur tous les éléments

Deux remarques en passant :
- évite d'écrire tes if/else sur une ligne, le code est illisible.
- en français la règle est qu'il faut un espace avant et après les signes de ponctuations : "?" ; "!" ; ";" et ":" En HTML l'espace insécable est  

[toto81]

Salut Auteur ! Merci d'avoir dplacé au bon endroit mon post

Alors c'est vrai que j'ai pas trop détaillé mais c'est un peu important de le préciser: je n'y connait rien en codage ^^

J'utilise WebAcappella pour créer mon site et du coup j'insert des codes html que je trouve sur internet. En gros tout ce
que tu m'a expliqué je ne l'ai compris qu'à moitié...

Le paramètre de ta fonction Toggle passe le sous la forme de chaines de caractères :

onclick="Toggle('1')"

Dans ta fonction Toggle, avant d'afficher le contenu visé, réalise une boucle en faisant un display="none" sur tous les éléments

Pourrais tu m'expliquer un peu plus comment je procède?

Merci

[SylvainPV]

je n'y connait rien en codage ^^

Tu es ici pour apprendre, non ?

Essaie de comprendre le code de cette fonction Toggle. Je l'ai réécrite pour toi afin d'essayer de la rendre plus claire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function Toggle(idReponse){
var elementReponse = document.getElementById(idReponse);
if(elementReponse.style.display == "none"){
   elementReponse.style.display = null; //remet l'affichage par défaut
} else {
   elementReponse.style.display = "none"; //cache l'élément   
}
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<!-- bloc 1 -->
<a onclick="Toggle('laReponse1')" class="qfaq">Pourrais-je jouer avec mon compte après mon paiement?</a><br />
<div id="laReponse1" class="rfaq" style="display:none;">
    Oui, nous vous previendrons par skype ou directement en jeu pour vous prevenir que nous allons nous connecter avec votre compte.
</div>

Tu remarqueras que toutes les réponses des FAQ ont une classe "rfaq" (réponse FAQ) dans le code HTML. Donc pour fermer toutes ces réponses, il faudrait sélectionner tous les éléments avec la classe "rfaq" puis les cacher. Tu sais comment cacher un élément en regardant le code de la fonction Toggle. Pour sélectionner par classe, je t'invite à te documenter sur document.getElementsByClassName ou document.querySelectorAll.