Besoin d'aide pour texte en accordéon - CSS / Général, Javascript / Ajax / DHTML

Sujet : Besoin d'aide pour texte en accordéon [ CSS / Général ] (devoluti0n)

Informations & options

Vous êtes ici : Thèmes / Javascript / DHTML / Ajax / CSS / Général / Besoin d'aide pour texte en accordéon
Ce sujet vous interesse ? Cliquez ici pour être averti quand il y a une nouvelle réponse

Besoin d'aide pour texte en accordéon le 13/06/2008 18:45:15

devoluti0n

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 :

<DIV class="question" onclick="afficherPara('question1');">La question ??</DIV>
<DIV class="réponse" <P id="question1">
   La réponse....
</p></DIV>

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 !!

Re : Besoin d'aide pour texte en accordéon le 14/06/2008 10:31:15

bultez
Membre Club

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 )

Cordialement

Bul [mon Site] [M'écrire]

Re : Besoin d'aide pour texte en accordéon le 14/06/2008 10:57:49

bultez Membre Club	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.... Cordialement Bul [mon Site] [M'écrire]
	Rép. MP 11108 msg 12321 msg CS

Re : Besoin d'aide pour texte en accordéon le 14/06/2008 15:21:49

devoluti0n

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 :)

Re : Besoin d'aide pour texte en accordéon le 14/06/2008 15:33:16

bultez
Membre Club

Réponse acceptée !
et pourtant... ça marche....
    si on met dans le "bon ordre" avec les id kivonbien...

<body>
<DIV onclick="afficherPara('question1');">La question 1</DIV>
<DIV id="question1" style="display:none">
   La réponse 1
</DIV>
<DIV onclick="afficherPara('question2');">La question 2</DIV>
<DIV id="question2" style="display:none">
   La réponse 2
</DIV>
<script>
var avant=document.getElementById('question1');

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

Cordialement

Bul [mon Site] [M'écrire]

Re : Besoin d'aide pour texte en accordéon le 14/06/2008 15:38:29

bultez Membre Club	quand je dis dans le bon ordre, c'est var avant=document.getElementById('question1'); après que cet élément soit décrit. Cordialement Bul [mon Site] [M'écrire]
	Rép. MP 11108 msg 12321 msg CS

Re : Besoin d'aide pour texte en accordéon le 14/06/2008 15:41:49

devoluti0n

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 !

Re : Besoin d'aide pour texte en accordéon le 14/06/2008 15:53:31

bultez
Membre Club

Réponse acceptée !

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.

Cordialement

Bul [mon Site] [M'écrire]