Faire un effet Afficher/masquer

Bonjour à tous Smile

Dans ce tutoriel, nous allons voir comment installer des éléments rétractable que notre forum soit sous ForumActif ou Xooit ou si nous souhaitons l'utiliser sur notre site. Voici un exemple de rendu : clic

Les bases

Pré-requis

Pour pouvoir réaliser ce tutoriel vous devez :

-> avoir quelques connaissances en html et css
-> avoir accès aux templates de votre forum
-> avoir un espace de stockage où envoyer des fichiers (si ce n'est pas le cas, je vous conseille de lire [ce tutoriel])

-> Attention, ceci ne fonctionne pas dans les messages si vous êtes sur un forum ForumActif. En revanche, si vous êtes sous xooit, vous pourrez utiliser ce code dans vos messages

La prépration de la partie html

On va commencer par créer un élément qui va déclancher l'animation. Pour que le javascript sache qu'il doit jouer l'animation quand on clique sur cet élément, on va lui donner un nom (ici on va utiliser l'attribut html "class" qui permet de nommer des éléments pour leur appliquer du CSS par exemple. On utilise class plutôt qu'id car ce bout de code reviendra plusieurs fois dans la page au niveau des profils).

Pour cette exemple, je vais prendre un paragraphe.

Code:

<p class="elt_declancheur">Clique moi !</p>

Puis, on va mettre dans un bloc "div" a qui on donne un nom aussi la partie de code ou le message qu'on veut afficher/masquer

Code:

<div class="afficher_masquer">Mon texte qui s'affiche et se cache</div>

Voilà ! Le html est prêt. Rapide hein ^^

La prépration de la partie javascript

Maintenant, on va créer un nouveau fichier nommé "afficher_masquer.js". C'est ce fichier qui va contenir le code de l'animation.

Pour le créer, utilisez tout simplement un logiciel de type "bloc note" puis faire : fichier >> enregistrer sous >> afficher_masquer.js (n'oubliez pas le .js qui est très très important )

On va commencer ce fichier par :

Code:

jQuery().ready(function(){

ce qui veut dire : "Dès que la page est chargée, je lis cette fonction"

Ensuite, on va dire :
-> Tu me caches tous les blocs qui ont comme nom de class (symbolisé par un . ) "afficher masquer"

Code:

$(".afficher_masquer").hide();

-> mais, si jamais on clique sur un truc qui a comme nom de class "elt_declancheur", tu fais cette fonction

Code:

$(".elt_declancheur").click(function(){

-> D'abord, tu testes si le bloc a affiché est caché ou pas et s'il est caché

Code:

if($(this).next("div").is(":hidden")){

-> tu caches tous les autres blocs qui ont comme nom de class "afficher masquer" grâce à un effet de slide vers le haut

Code:

$(".afficher_masquer").slideUp();

-> tu affiches le bloc que je t'ai demande, c'est à dire le div qui est après l'élement sur lequel j'ai cliqué (this). Cet affichage se fera grâce à un slide vers le bas

Code:

$(this).next("div").slideDown();

-> mais si jamais le bloc après le texte sur lequel j'ai cliqué était déjà affiché (donc le contaire de la condition citée plus haut)

Code:

}else{

-> dans ce cas, tu caches le bloc (div) qui est après le mot sur lequel je viens de cliquer (this)

Code:

$(this).next("div").slideUp();

Puis, on oublie pas de bien fermer les accolades Smile

------------

Au final, notre fichier afficher_masquer.js contient :

Code:

jQuery().ready(function(){
$(".afficher_masquer").hide();
$(".elt_declancheur").click(function(){
if($(this).next("div").is(":hidden")){
$(".afficher_masquer").slideUp();
$(this).next("div").slideDown();
}else{
$(this).next("div").slideUp();
}
});
});

Il ne vous reste plus qu'à héberger ce fichier sur votre espace de stockage.

Autres infos avant d'aller plus loin

Donc pour le moment on a :

-> le code html prêt
-> l'animation prête.

il ne reste plus qu'à lier les 2 Smile

Pour cela, on va faire en sorte que ce code puisse fonctionner sur tout le forum. On va donc l'intégrer à toutes les en-têtes des pages du forum. Pour cela, on va aller ouvrir le template "overall_header" (à comprender overall = sur tout ; header = en tete) quelque soit la plateforme sur laquelle est hébergée notre forum Smile

On va appeler 2 fichiers :

-> la bibliothéque jquery, qui contient les 2 fonctions dont on va avoir besoin (slideUp et slideDown)

Code:

-> le fichier que l'on vient de créer :

Code:

(n'oubliez pas de remplacer "nom" par l'endoit où se trouve le fichier)

Ce qui fait :

Code:

Pour l'utiliser sur votre site

Il vous suffit d'appeler ces 2 scripts entre les balises "head" de votre page html.

Pour les utilisateurs de FA

On va repérer ceci :

Code:

</head>

Et on copie colle les 2 scripts juste avant

On valide, on publie.

Pour les utilisateurs de xooit

On va repérer ceci :

Code:

Et on copie colle les 2 scripts juste avant

On valide.

-----------------

Ah oui et pour finir, Parlons un peu mise en page Smile

Peut être que, comme sur SoP, vous avez déjà des styles prédéfinies. Dans ce cas, il est possible de combiner 2 class ^^

Par exemple :

Code:

<h1 class="elt_declancheur ma_class">Clique moi !</h1>
<div class="afficher_masquer">mon texte</div>

De même qu'il est possible de cumuler une classe et un id. Par exemple :

Code:

[code]<h1 class="elt_declancheur">Clique moi !</h1>
<div class="afficher_masquer" id="min_id>mon texte</div>[/code]

Utiliser ce système pour la Chatbox

Ahhh ! Les CB, ça prend de la place hein ! ça serait top de pouvoir faire en sorte qu'elle se rétracte quand on le veut ? Alors voyons voir ça ensemble Smile

Pour la CB, on ne va pas utiliser un paragraphe, mais un titre comme élément déclancheur. Pour cela, on va utiliser une balise de hierarchisation "h". Cela nous donne donc ça :

Code:

<h1 class="elt_declancheur">Clique moi !</h1>

Puis, on va mettre dans le bloc "div" la partie de code concernant la CB.

Pour les utilisateurs de FA

Vous trouverez ce code dans le template "index_body".

-> Si votre CB est en haut, vous devrez prendre cette variable : {CHATBOX_TOP}

-> Si votre CB est en bas, ce sera celle-ci : {CHATBOX_BOTTOM}

Moi je vais considérer qu'elle est en haut Smile

Code:

<div class="afficher_masquer">{CHATBOX_TOP}</div>

Il ne reste plus qu'à aller dans le template "index_body" et remplacer la variable concernant la CB par ce code

donc pour moi, je remplace

Code:

{CHATBOX_TOP}

par

Code:

<h1 class="elt_declancheur">Clique moi !</h1>
<div class="afficher_masquer">{CHATBOX_TOP}</div>

On valide, on publie, et zoup ! Le tour est joué ^^

Pour les utilisateurs de xooit

Ici, c'est super simple Smile

Ouvrez le template "chat.tpl".

Copiez ceci au tout début :

Code:

<h1 class="elt_declancheur">Clique moi !</h1>
<div class="afficher_masquer">

et ça tout à la fin :

Code:

</div>

On valide et le tour est joué Very Happy

Utiliser ce système pour des profils rétractables

Et oui ! vous pouvez aussi utiliser ça pour faire des profils rétractables. Par exemple :

=> sous FA :

Spoiler:

=> sous xooit :

Spoiler:

Pour cela, voici ce qu'il faut faire Smile

Pour cette modif, on va aller dans le template "viewtopic_body" quelque soit la plateforme sur laquelle votre forum est hébergé

Pour les utilisateurs de FA

La partie qui concerne l'auteur est celle-ci :

Code:

span class="name"><a name="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span>

         <span class="postdetails poster-profile">
         {postrow.displayed.POSTER_RANK}

         {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}

         
         {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
         
         {postrow.displayed.POSTER_RPG}
      </span>

Si on décortique un peu :

-> {postrow.displayed.U_POST_ID} = le lien vers le profil de l'auteur
-> {postrow.displayed.POSTER_NAME} = le pseudo de l'auteur
-> {postrow.displayed.POSTER_RANK} = le rang de l'auteur
-> {postrow.displayed.RANK_IMAGE} = l'image de rang de l'auteur
-> {postrow.displayed.POSTER_AVATAR} = l'avatar de l'auteur
-> {postrow.displayed.profile_field.LABEL} = les intitulés des champs du profil
-> {postrow.displayed.profile_field.CONTENT} = le contenu des champs du profil
-> {postrow.displayed.profile_field.SEPARATOR} = la façon dont est séparé chaque champs
-> {postrow.displayed.POSTER_RPG} = les champs en rapport avec le feuille de personnage

Donc, si vous voulez masquer toute la partie contenant les champs du profil, il faut remplacer ça :

Code:

{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}

par ça

Code:

<p class="elt_declancheur">Plus d'infos</p>
         <div class="afficher_masquer">
         
         {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
         
         </div>

Si vous voulez masquer les infos de la feuille de personnage, il faut remplacer ça :

Code:

{postrow.displayed.POSTER_RPG}

par ça :

Code:

<p class="elt_declancheur">Infos RPG</p>
         <div class="afficher_masquer">
         {postrow.displayed.POSTER_RPG}
         </div>

Pour les utilisateurs de xooit

La partie qui concerne l'auteur est celle-ci :

Code:

<td width="150" align="left" valign="top" class="{postrow.ROW_CLASS}"><span class="name"><a name="{postrow.U_POST_ID}"></a><b>{postrow.POSTER_NAME}</b></span>
<span class="postdetails">{postrow.POSTER_RANK}
{postrow.RANK_IMAGE}{postrow.POSTER_AVATAR}

{postrow.POSTER_JOINED}
{postrow.POSTER_POSTS}
{postrow.POSTER_FROM}</span>
</td>

Si on décortique un peu :

-> {postrow..U_POST_ID} = le lien vers le profil de l'auteur
-> {postrow.POSTER_NAME} = le pseudo de l'auteur
-> {postrow.POSTER_RANK} = le rang de l'auteur
-> {postrow.RANK_IMAGE} = l'image de rang de l'auteur
-> {postrow.POSTER_AVATAR} = l'avatar de l'auteur
-> {postrow.POSTER_JOINED} = date d'inscription de l'auteur
-> {postrow.POSTER_POSTS} = nombre de messages de l'auteur
-> {postrow.POSTER_FROM} = ville de l'auteur de l'auteur

Si vous voulez masquer toutes les infos autres que l'avatar, le pseudo et le rang, il faut remplacer ça :

Code:

{postrow.POSTER_JOINED}
{postrow.POSTER_POSTS}
{postrow.POSTER_FROM}</span>

par ça :

Code:

<p class="elt_declancheur">Plus d'infos</p>
<div class="afficher_masquer">{postrow.POSTER_JOINED}
{postrow.POSTER_POSTS}
{postrow.POSTER_FROM}</span></div>

Et voilà ! Le tour est joué !

Des infos ? Soucis ? Questions ? N'hésitez pas !

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]