Besoin d'aide pour texte en accordéon [Résolu]

Signaler
Messages postés
22
Date d'inscription
lundi 14 mars 2005
Statut
Membre
Dernière intervention
14 juin 2008
-
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
Bonjour !

Je vous éxpose mon petit probleme :

J'éssaye de mettre en place une FAQ dont toutes les questions seront listés, et par clic sur ces questions, les réponses apparaitront en dessous.
Cela fonctionne trés bien à l'aide du code suivant :

Le javascript :

 function afficherPara(para)
 {
  if(document.getElementById(para).style.display == 'none')
   document.getElementById(para).style.display = 'block';
  else
   document.getElementById(para).style.display = 'none';
 }

Le html :

La question ??

Bref, j'aimerai savoir comment on peut faire pour que lorsque je clic sur une autre question, la quesiton précédente se referme...
Ca peut paraitre stupide mais je bloque.

Merci !!

7 réponses

Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
et pourtant... ça marche....
    si on met dans le "bon ordre" avec les id kivonbien...

La question 1

   La réponse 1

La question 2

   La réponse 2

<script>
var avant=document.getElementById('question1');

 function afficherPara(para)
 {    avant.style.display="none";
       avant=document.getElementById(para);
       avant.style.display = 'block';
 }
</script>

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
ne pas oublier que le html/javascript c'est de l'interprété,
    ça s'exécute ligne par ligne ( en oubliant les functions )

<...id="toto"...
    document.getElementById("toto")...   c'est ok
    document.getElementById("titi")...      c'est ko
<..id="titi"...

var avant = question1 c'est uniquement pour la 1ère fois.
sinon, dans la fonction, il faudrait tester si un "précédent"
    existe, si avant est intialisé....   il vaut mieux, initialiser
    avant et faire un display="none" inutile la 1ère fois, que
    de tester si c'est la 1ère fois ou pas... à chaque fois !

la function affichepara peut-être située n'importe où....
    elle ne sera exécuté qu'une fois la page interprétee
    et aura accès à tous les ID.

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
Bonjour,
    mémorise dans une variable globale le div que tu viens d'afficher.
    et cache le.

var avant=document.getElementById('question1');
 function afficherPara(para)
 {
    avant.style.display="none";
  if(document.getElementById(para).style.display == 'none')
   {    avant=document.getElementById(para);
         avant.style.display = 'block';
    }
  else
   {    document.getElementById(para).style.display = 'none';   }
 }

    ça devrait le faire ( ou pas loin )
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
euh... d'ailleurs....

var avant=document.getElementById('question1');

 function afficherPara(para)
 {    avant.style.display="none";
       avant=document.getElementById(para);
       avant.style.display = 'block';
 }

    ça suffira....

<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
22
Date d'inscription
lundi 14 mars 2005
Statut
Membre
Dernière intervention
14 juin 2008

Bonjour, je sais pas vraiment pourquoi mais aucun des deux codes ne fonctionnent.

Bon cette ligne :

var avant=document.getElementById('question1');

je l'ai modifiée en

var avant=document.getElementById(para);

car je n'ai pas qu'une seule question.

Mais cela ne fonctionne pas, mais j'ai compris je pense le principe.
Il faut stocker dans une variable le dernier qui a été ouvert.
Je vais éssayer de trouver en utilisant cette méthode, merci :)
Messages postés
13616
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
33
quand je dis dans le bon ordre, c'est
    var avant=document.getElementById('question1');
    après que cet élément soit décrit.
<hr />                Cordialement            Bul         [mon Site]     [M'écrire]
Messages postés
22
Date d'inscription
lundi 14 mars 2005
Statut
Membre
Dernière intervention
14 juin 2008

Oui, et en effet, le script placé comme ceci ça fonctionne trés bien, et bisarment j'ai l'impréssion que ça fonctionne "trop" bien, je m'éxplique :

Je l'ai placé aprés la question 1, ce qui signifie que les autres questions sont en dessous, et malgrés le fait que la variable avant ne fait appel qu'a la premiere question, comment ce fait il que ça fonctionne avec les autres question portant un autre nom que "question1" ?

Malgré tout merci, mais j'attends quand meme une réponse :).
Merci encore !