Ce tutoriel a été publié par final-blond sur SOS-Forum. Afin que les tutoriels de SOS-Forum restent en libre accès, ainsi que par respect du travail accompli, tout tutoriel copié ou s'en inspirant publié ailleurs qu'ici, devra en citer le ou les auteurs ainsi que la provenance via un lien vers ce sujet sur le SOS-Forum.

Après me faire envahir la boîte mp du fdf pour ce tuto, autant le laisser en astuce un peu partout.

---

• Tout d'abord copier-coller simplement tel quel dans un premier temps, histoire de se familiariser avec les tables.
  Ensuite rien n'empêche de personnaliser ce tuto, ou juste de le personnaliser avec les balises standards du html.
  
• Le tout a été divisé en parties bien distinctes, à vous de remplir les titres, le contenu, d'aligner, de colorer, même de mettre des couleurs ou des images en fond des tables.
  

  Code:

  <script src="/js_58/collapsible_faq.js"></script>

<table class="forumline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td class="catHead" height="28" align="center"><span class="softtitle">TITRE DE LA CATEGORIE 1</span></td>
</tr>
<tr>
<td class="row1" valign="top">
<div onclick="return CFAQ.display('faq_a_1', false);" style="width: 100%; cursor: pointer; cursor: hand;">
<span class="gen">
<a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_1', true);" onfocus="this.blur();">
<b>TITRE CHAPITRE 1.1</b>
</span>
</div>
<div id="faq_a_1" style="display: none;">
<table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td valign="top"><span class="postbody">CONTENU 1.1<br />
</span></td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td class="row2" valign="top">
<div onclick="return CFAQ.display('faq_a_2', false);" style="width: 100%; cursor: pointer; cursor: hand;">
<span class="gen">
<a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_2', true);" onfocus="this.blur();">
<b>TITRE CHAPITRE 1.2</b>
</span>
</div>
<div id="faq_a_2" style="display: none;">
<table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td valign="top"><span class="postbody">CONTENU 1.2<br />
</span></td>
</tr>
</table>
</div>
</td>
</tr>
</table><br clear="all" />

<table class="forumline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td class="catHead" height="28" align="center"><span class="softtitle">TITRE DE LA CATEGORIE 2</span></td>
</tr>
<tr>
<td class="row1" valign="top">
<div onclick="return CFAQ.display('faq_a_3', false);" style="width: 100%; cursor: pointer; cursor: hand;">
<span class="gen">
<a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_3', true);" onfocus="this.blur();">
<b>TITRE CHAPITRE 2.1</b>
</span>
</div>
<div id="faq_a_3" style="display: none;">
<table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td valign="top"><span class="postbody">CONTENU 2.1<br />
</span></td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td class="row2" valign="top">
<div onclick="return CFAQ.display('faq_a_4', false);" style="width: 100%; cursor: pointer; cursor: hand;">
<span class="gen">
<a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_4', true);" onfocus="this.blur();">
<b>TITRE CHAPITRE 2.2</b>
</span>
</div>
<div id="faq_a_4" style="display: none;">
<table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td valign="top"><span class="postbody">CONTENU 2.2<br />
</span></td>
</tr>
</table>
</div>
</td>
</tr>
</table><br clear="all" />

  
  
• Le principe est simple :
  - c'est un tableau sous forme de catégorie
  - contenant des tables sous formes de chapitres
  - qui contiennent le contenu sous formes de lignes
  
• Dans l'exemple il y a deux catégories contenant deux chapitres (tables) qui contiennes deux contenus (textes, images, ou les deux).
  
• Pour les plus avancés, et même pour les moyens (j'y suis bien arrivée), vous pouvez nuancer les couleurs des tables en alternance, bref, plein de possibilités.
  
• Ne fonctionne pas dans un post, et ne s'ouvre pas en étant dans une catégorie s'il est en description d'un forum, dans ce cas précis, que sur l'index du forum.

Bien du plaisir.

EDIT : Petite astuce : Coller d'abord ce code tel quel dans une page html ainsi on peut faire des prévisualisations et mieux travailler sur le reste.

Tout d'abord, pour ceux qui auraient déjà copier le script, plus haut, il est juste mais par pure coïncidence et il vaut mieux le rendre conforme (comme je viens de le faire avec celui plus haut), si vous voulez vous y retrouvez plus tard avec un autre de ces tableaux.
C'est en fait un point logique, de numération des tables qui constituent ce script.

• Il y a trois fois faq_a_X par table (X = le numéro de la table).
  Ce numéro ne peut pas être le même d'une table à l'autre (plus, je crois bien sur la même page), mais il doit être le même sur les trois paramètres de la même table.
  Ici, il y a 4 ouvertures, et donc ça se termine par 4.
  Si vous voulez insérer un autre tableau, il faudra commencer en continuant avec 5 (ou autre).
  
• L'autre point, est le numéro du script (tout au début du tuto).
  Vérifiez bien que c'est aussi le 58 comme pour FA.
  Pour ça, vous prenez le code source d'une page de votre forum (par le clic droit ou Ctrl U avec MF) et cherchez .js juste à gauche vous aurez le numéro.
  
• Il faut être très concentré sur les fermetures des balises !
  Sinon vous pouvez planter le tout.
  

Voilà, là c'est exhaustif.