améliorer ma F.A.Q

[marque]

Bonjour à tous en ce dimanche soir,

J'ai fait la faq de mon site en numérotant les questions (12 en tout). cela fait beaucoup au final et cela prend de la place.

J'aurais voulu que sur le site n'apparaisse que les questions. et lorsque l'on clique sur la question: la réponse apparaît.

le mieux cela serait que la réponse disparaisse lorsque l'on re clique sur la question.

bonne fin de w.e

[karnabal]

Salut,

Tu peux t'inspirer des méthodes utilisés pour l'affichage de menus. Généralement il s'agit de blocs affichés au survol. Est-ce que cela pourrait te convenir ?

[marque]

ah oui, cela jette bien

[ccluz]

salut,

tu peux t'inspirer de ce site (c'est pas le mien, mais le systeme utilisé en javascript ressemble bien je crois à ta recherche ! ) :

http://www.moliets.com/faq-fr.html

[marque]

tu peux t'inspirer de ce site (c'est pas le mien, mais le systeme utilisé en javascript ressemble bien je crois à ta recherche !

c'est super !! Qui connait ce javascript?.

[ccluz]

c'est pas très jolie , je m'en excuse, mais si cela peut aider, c'est deja ça !

Le script :

 <script language=JavaScript type=text/JavaScript>
var selected=0;
function selectrecette(num) {
	if(selected!=0) {
		document.getElementById("recette"+selected).style.display="none";
		document.getElementById("Btn"+selected).src="URL de ton site/triangle-droit.gif";
	}
	if(selected==num) {
		document.getElementById("recette"+selected).style.display="none";
		document.getElementById("Btn"+selected).src="URL de ton site/triangle-droit.gif";
		selected=0;
	} else {
		selected=num;
		document.getElementById("recette"+selected).style.display="inline";
		document.getElementById("Btn"+selected).src="URL de ton site/triangle2.gif";
	}
}
	</SCRIPT>

Exemple

		   <td width="523" align="left" valign="top" height="17" colspan="5">
		  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
			<tr>
			  <td width="50%">
		  <IMG id=Btn1 src="triangle-droit.gif" align=absMiddle border=0><font face="Verdana" size="2"><STRONG> <A class=faqTitre 
			onclick="if(selected==1) this.classNme='recetteTitreOn';else this.classNme='recetteTitre';" 
			href="java script:selectrecette(1)">
			  titre 1</A></STRONG> </font> 
		</TD></TR>
		<TR>
		  <TD class=faqTexte id=recette1 style="DISPLAY: none" width="523" align="left" valign="top" height="79" colspan="5">
			<BLOCKQUOTE>
			  <p>

							<font size="1" face="Verdana" color="#1859BB">
							texte du menu 1</font></p>
			</BLOCKQUOTE></TD></TR>
		<TR>
		   <td width="523" align="left" valign="top" height="17" colspan="5">
			  <p>
		   <IMG id=Btn2 src="triangle-droit.gif" align=absMiddle border=0><font face="Verdana" size="2"><STRONG> </STRONG><A class=recetteTitre 
			onclick="if(selected==2) this.classNme='recetteTitreOn';else this.classNme='recetteTitre';" 
			href="java script:selectrecette(2)">
		  <STRONG>titre 2</STRONG></A> </font> 
		   </TD></TR>
		<TR>
		  <TD class=recetteTexte id=recette2 style="DISPLAY: none" width="523" align="left" valign="top" height="55" colspan="5">
			  </p>
			<BLOCKQUOTE>
			  <p>

							<font size="1" face="Verdana" color="#1859BB">
								  texte du menu 2</font></p>
			</BLOCKQUOTE>
								</td>

recette = je m'en sers pour un listing de recettes de cuisine.

En copiant - collant tout ceci, cela devrait marcher ! Reste plus qu'a dupliquer et modifier selon tes besoins.

ccluz

[Kean]

Je pense pas que ce n'est pas vraiment une bonne idée le javascript. Simplement car si une personne bloque les js, bah elle a pas accès à la FAQ. Ce serait un peu dommage surtout le principe des FAQ..

§§

[captain_torche]

Effectivement, pour rendre ce genre de manips accessibles à tous, il faut afficher par défaut les blocs, et les masquer en JavaScript.

A ce que je vois de plus en plus souvent, par contre, la "mode" actuellement est de faire un premier menu comportant juste les questions, avec des liens vers des ancres plus bas dans la page, et (donc) plus bas, une reprise des questions, avec chaque fois le détail de la réponse.