Discussion :

[morgan47]

Bonjour,

Je suis en trains de créer une FAQ dont voici le code mais je n'y connais rien en javascript :

Code javascript :

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
 
<script language="javascript" type="text/javascript">
function bascule(elem)
   {
   etat=document.getElementById(elem).style.display;
   if(etat=="none"){
   document.getElementById(elem).style.display="block";
   }
   else{
   document.getElementById(elem).style.display="none";
   }
   }
</script>
<div style="border:0px solid green;margin:5px;padding:5px;font-family:Verdana, Geneva, sans-serif">
<a href="" onclick="bascule('1'); return false;">TITRE1</a>
<div id='1' style='display:none;'>
TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE 
</div>
</div>

Le code fonctionne et affiche bien le texte lorsque l'on clique sur le titre et inversement, il le cache lorsque l'on reclique.

Je souhaiterai rajouter une fleche devant le titire du style : > Titre 1
Et lorsque l'on clique, que la fleche se mette pointe vers le bas.

JE n'ai aucune idée de comment faire.

JE vous remercie pour votre aide.

Cordialement,
Morgan

[devyan]

Bonjour,

Tu peux gérer ça en CSS, pas besoin de JavaScript.

C'est un "Rollover", il doit y avoir pleins de sujets et même des exemples dans la FAQ.

devYan.

[morgan47]

Merci pour ta réponse, mais je n'ai pas trouvé d'info pour ce que je veux faire.

Je voudrai, quand le texte est affiché avoir une image, et quand le texte est caché avoir une autre image.

[devyan]

En fait si tu as trouvé des exmples de rollover CSS si

un exemple :
CSS =

Code :

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

1
2
3
4
5
6
7
8
9
.mon-titre { 
     background: url(image-fleche-horizontale) no-repeat 0 0; 
     padding-left: 20px; /* par exemple : cette dimension dépend de la taille de ton image */
}

.mon-titre:hover { 
     background: url(image-fleche-verticale) no-repeat 0 0; 
}

il suffit de changer (ou ajouter) un autre nom de classe CSS à .mon-titre:hover (par exemple ".ouvert") ...

Ça nous donne :

Code :

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

1
2
3
4
5
6
7
8
9
.mon-titre { 
     background: url(image-fleche-horizontale) no-repeat 0 0; 
     padding-left: 20px; /* par exemple : cette dimension dépend de la taille de ton image */
}

.mon-titre.ouvert  { 
     background: url(image-fleche-verticale) no-repeat 0 0; 
}

Côté JS il ne reste plus qu'à ajouter la classe CSS "ouvert" ou à l'enlever pour basculer de l'un à l'autre lors du clic.

Pour cela quelques petites adaptations de ton code sont nécessaires :
HTML =

Code :

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

1
2
3
4
5
6
<div style="border:0px solid green;margin:5px;padding:5px;font-family:Verdana, Geneva, sans-serif">
<a class="mon-titre" href="" onclick="bascule('1', this); return false;">TITRE1</a>
<div id='1' style='display:none;'>
TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE 
</div>
</div>

JS =

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function bascule(elem, lien) {
    etat=document.getElementById(elem).style.display;
    if(etat=="none"){
        document.getElementById(elem).style.display="block";
        // basculer sur l'image "ouvert" (attention il y a bien un espace entre mon-titre et ouvert)
        lien.className = "mon-titre ouvert"; 
    } else {
        document.getElementById(elem).style.display="none";
        // basculer sur l'image "fermer"
        lien.className = "mon-titre"; 
    }
}

[morgan47]

Je te remercie beaucoup, ça fonctionne parfaitement.