1 Script : Spoiler façon FAQ - HTML 2/4/2009, 02:20
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.
Tuto pour créer un système de spoiler façon la FAQ - HTML -
Dans un widget, le message d'accueil, une page html, description d'un forum
Dans un widget, le message d'accueil, une page html, description d'un forum
- 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.
Dernière édition par final-blond le 23/12/2009, 13:15, édité 1 fois