[Template + CSS + JS] Infos de profil en spoiler

Bonjour !

Alors je sais que ça existe déjà, mais je viens proposer ici une autre version des spoilers qui permettent d'afficher / masquer les infos de profil situées sous l'avatar.

Il y a deux variantes, comparé à ce que j'ai pu voir :
- Aucun javascript ou CSS n'est écrit en dur dans le template, seulement des div avec leurs classes
- Lorsque le texte masqué est affiché, cliquer celui-ci ne déclenche pas la fermeture. Il faut cliquer sur le même texte qui a permis l'ouverture pour le refermer

I. Le template
Dans Affichage -> (Templates) Général -> viewtopic_body, vers les lignes 130 et quelques (cela varie)

Remplacer

Code:

<!-- BEGIN profile_field -->
        {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}

Par

Code:

<div class="my_spoiler"><div class="titre_spoiler">Afficher</div><div class="contenu_spoiler">
 <!-- BEGIN profile_field -->
        {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </div></div>

(ne pas oublier de publier le template une fois celui-ci modifié ^^)
Ceux qui ont déjà joué à modifier les spoilers dans des posts de forum auront reconnu la structure, j'ai repris exactement la même. Un "cadre" de spoiler, qui contient un titre cliquable et le contenu masqué. Il fonctionnera exactement de la même façon, dès qu'on clique sur le titre, le contenu s'affiche. Un nouveau clic sur le titre et le contenu disparaît.

II. Le Javascript
Dans Modules (HTML & JAVASCRIPT) -> Gestion des codes Javascript, créer une nouvelle feuille javascript, lui donner un nom et l'activer sur toutes les pages (uniquement "Dans les sujets" fonctionne aussi, mais l'activer partout est un peu mieux, car si on reprend la structure du spoiler ailleurs (genre sur la PA), le script sera fonctionnel ^^).

Code:

window.addEventListener("load", onload, false);
function onload() {
   $(".my_spoiler").children(".titre_spoiler").click(function() {
      if($(this).parent(".my_spoiler").children(".contenu_spoiler").css("display") == "none") {
         $(this).parent(".my_spoiler").children(".contenu_spoiler").css("display","block");
         $(this).text("Masquer");
      } else {
         $(this).parent(".my_spoiler").children(".contenu_spoiler").css("display","none");
         $(this).text("Afficher");
      }
   });
}

Vous constaterez qu'il ne brille pas de par son côté compressé xD ! Je suis une quiche en Js et jQuery, j'ai donc fait ça à tâtons (j'étais pas chaud pour jouer avec un opérateur ternaire, cela se voit je pense xD) ! (d'ailleurs si quelqu'un se sent de l'optimiser, je dis pas non ^^) Si vous ne voulez pas que le texte "titre" du spoiler ne change lorsqu'on clique dessus, retirez les deux appels à la fonction text() et ce sera bon ^^ ! (le script ne compare pas le texte pour en déduire si le spoiler est ouvert ou non, ça n'affectera en rien le fonctionnement =)

III. Le CSS
Dans Afichage -> Couleurs -> Feuille de Style CSS, ajouter

Code:

.my_spoiler{

}

.my_spoiler .titre_spoiler{
cursor:pointer;
  text-align:center;
  padding:5px;
  font-size:12px;
}

.my_spoiler .contenu_spoiler {
display:none;
}

J'ai mis le grand minimum, mais il y a les 3 classes importantes. Vous pouvez ensuite le personnaliser comme vous voulez, bien entendu ^^

rendu :

Je crois que c'est à peu près tout, si vous avez des critiques constructives, des suggestions ou du Js plus efficient à me proposer, je suis à l'écoute !

Voilou :)

Est-ce qu'on pourrait avoir un visuel du résultat ? =)

C'est ajouté =)
S'il y a besoin de plus de screens, y'a pas de soucis =)

Han cool!

Merci :3

Trop cool ! Merci

Merci, je vais voir ça :3

Testé et approuvé, merci pour cette astuce ! L'effet fait plus "propre" que le profil de base tout en étant simple. Merci d'avoir partagé ! (et évidemment je te crédite, c'est la moindre des choses ♥)

merci beaucoup du partage *o*

merci

Merci beaucoup pour l'astuce !

Merci beaucoup pour le partage!

merci

thank's

Merci !

Merci =)

merci !!!!

Merci

merci

Merci (((o(*ﾟ▽ﾟ*)o)))

Intéressant je pense que ça va m'aider à personnaliser ma variante merci :)

Merci !

merci

Merci !

merci

très bon tuto et code simple à utiliser merci bien