Modification de Aide:Afficher et masquer du contenu

{{Navigation aide|Avancé}}

Ceci est une extension des possibilités du bouton « Enrouler/Dérouler », jusqu'ici uniquement présent en première ligne des tableaux définis avec <code>class="enroulable"</code>.

Ce bouton peut désormais être mis en place par vous-même en code HTML, ou par le biais d'un modèle simplifiant sa création.

==Écriture du code==

===Créer votre bouton===
Vous pouvez donner diverses informations au script par le biais du marqueur <code>class=</code>. Les arguments sont à séparer par un espace et l'ordre dans lequel les placer n'est pas obligatoire.
<br style="clear:both;" />
Prenons l'exemple de ce bouton :

<pre>
<button type="button" name="cible" value="afficher" title="Cacher">Montrer</button>
</pre>

;type="button"
:L'argument principal qui indique à la page que vous souhaitez créer votre bouton.
;name="cible"
:Un argument essentiel qui va indiquer ce que vous souhaitez voir apparaitre ou disparaitre en cliquant sur le bouton. Nous reviendrons très vite à cet argument un peu plus loin.
;value="afficher"
:La fonction du bouton lorsque la page est chargée pour la première fois. Vous pouvez également définir cet argument avec <code>masquer</code>.
:Faites attention à bien taper <code>afficher</code> ou <code>masquer</code> en minuscule ici !
;title="Cacher"
:L'apparence que le bouton prend lorsqu'un clic est fait dessus.
;Montrer
:L'apparence d'origine du bouton.

===Définir les cibles de votre bouton===
La cible du bouton à afficher ou masquer doit être ''marquée'' par une class dont vous définissez le nom comme bon vous semble.

Par exemple, si vous souhaitez que votre contenu (tableau/texte/image) soit associé à ''classcible'', vous devez taper :
<pre>
<div class="classcible">Le contenu à afficher/masquer</div>
</pre>

Si vous souhaitez qu'un autre bouton dispose d'une autre cible, donnez-lui un nom différent. Par exemple :
<pre>
<div class="classcible2">Un autre contenu à afficher/masquer</div>
</pre>

===Relations boutons-cibles possibles===

====Un bouton : une cible====
Il s'agit de la configuration standard, la plus simple à mettre en place et donc celle qui sera à privilégier dans les articles.

<u>Code:</u>
<pre>
<button type="button" name="test1" value="afficher" title="Cacher">Montrer</button>

<span class="test1">Coucou !</span>
</pre>

<u>Résultat:</u>

<button type="button" name="test1" value="afficher" title="Cacher">Montrer</button>&nbsp;&nbsp;&nbsp;&nbsp;<span class="test1">Coucou !</span>

====Un bouton : plusieurs cibles====


<u>Code:</u>
<pre>
<button type="button" name="test2" value="afficher" title="[-] Masquer">[+] Afficher</button>

<span class="test2" style="color:blue">Coucou !</span>

<span class="test2" style="color:red">Tu veux voir mon code ?</span>
</pre>

<u>Résultat:</u>

<button type="button" name="test2" value="afficher" title="[-] Masquer">[+] Afficher</button>&nbsp;&nbsp;&nbsp;&nbsp;<span class="test2" style="color:blue">Coucou !</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="test2" style="color:red">Tu veux voir mon code ?</span>

====Plusieurs boutons : une cible====

Il est possible d'afficher plusieurs boutons affichant/masquant la même cible. Ce type de procédé devrait dans l'idéal être évité, ou utilisé uniquement pour les contenus denses, avec les boutons en début et en fin d'affichage.

<u>Code:</u>
<pre>
<button type="button" name="test3" value="afficher" title="[Enrouler]">[Dérouler]</button>

<span class="test3">Coucou !<br />Voici le contenu caché.

Il prend plusieurs lignes et peut donc parfois se révéler assez dense.</span>

<button type="button" name="test3" value="afficher" title="[Enrouler]">[Dérouler]</button>
</pre>

<u>Résultat:</u>

<button type="button" name="test3" value="afficher" title="[Enrouler]">[Dérouler]</button>

<span class="test3">Coucou !<br />Voici le contenu caché.

Il prend plusieurs lignes et peut donc parfois se révéler assez dense.</span>

<button type="button" name="test3" value="afficher" title="[Enrouler]">[Dérouler]</button>

====Plusieurs boutons : plusieurs cibles====

Le principe est le même que pour la relation précédente, cette fois-ci appliqué à plusieurs contenus. Encore une fois, il est préférable de n'utiliser ce type de relations que dans les modèles dotés d'un grand nombre de sections et de liens.

<u>Code:</u>
<pre>
<button type="button" name="test4" value="afficher" title="↓ Cache-moi ça !">↑ Montre-moi tout !</button>

<span class="test4" style="color:blue">Coucou !<br />Voici le premier contenu caché, de couleur bleue.

Il prend plusieurs lignes et peut donc parfois se révéler assez dense.</span>

<span class="test4" style="color:red">Et hop !<br />Voici un deuxième contenu caché, de couleur rouge.

Il prend lui aussi de la place, surtout lorsqu'il est associé au premier.</span>

<button type="button" name="test4" value="afficher" title="↑ Cache-moi ça !">↓ Montre-moi tout !</button>
</pre>

<u>Résultat:</u>

<button type="button" name="test4" value="afficher" title="↓ Cache-moi ça !">↑ Montre-moi tout !</button>

<span class="test4" style="color:blue">Coucou !<br />Voici le premier contenu caché, de couleur bleue.

Il prend plusieurs lignes et peut donc parfois se révéler assez dense.</span>

<span class="test4" style="color:red">Et hop !<br />Voici un deuxième contenu caché, de couleur rouge.

Il prend lui aussi de la place, surtout lorsqu'il est associé au premier.</span>

<button type="button" name="test4" value="afficher" title="↑ Cache-moi ça !">↓ Montre-moi tout !</button>

=== Pour les tableaux ===
==== Afficher/Masquer l'intégralité du tableau ====
Un tableau peut être affiché ou masqué dans son intégralité de la même manière que le texte ou les images.

Par exemple :
<pre>
<button type="button" name="test6" value="afficher" title="[-] Masquer"> Un tableau masqué dans son intégralité: [+] Afficher</button>

<div class="test6">
{| class="tableaustandard centre"
|-
! Un tableau affiché dans son intégralité
|-
| Avec toutes ses cases.
|}
</div>
</pre>

Donne :
<button type="button" name="test6" value="afficher" title="[-] Masquer"> Un tableau masqué dans son intégralité: [+] Afficher</button>

<div class="test6">
{| class="tableaustandard centre"
|-
! Un tableau affiché dans son intégralité
|-
| Avec toutes ses cases.
|}
</div>

==== Afficher/Masquer une partie du tableau ====
Cependant, pour afficher ou masquer seulement une partie d'un tableau, il faut procéder autrement :

===== Utiliser un tableau enroulable =====
Utiliser un tableau <code>enroulable</code> (ou <code>enroulable enroulé</code>) permet au lecteur de pouvoir afficher ou masquer toutes les lignes d'un tableau à l'exception de l'entête (voir la section ''5 - Interactions avec le lecteur'' de la page [[Aide:Insérer un tableau]] pour plus d'informations).

===== Définir comme cible une ligne =====
Il est possible de définir comme cible d'un bouton une ligne de tableau en ajoutant une classe après le code <code>|-</code> indiquant le passage à cette ligne.

Par exemple :
<pre>
<button type="button" name="test7" value="afficher" title="[-] Masquer les lignes grises"> [+] Afficher les lignes grises</button>

<div class="test7">
{| class="tableaustandard centre"
|- class="test7"
| colspan="2" style="background:#AAAAAA" | Une ligne pouvant être masquée
|-
| colspan="2" |Une ligne toujours affichée
|- class="test7"
| colspan="2" style="background:#AAAAAA" | Une autre ligne pouvant être masquée
|-
| Une autre ligne...
| ...toujours affichée
|-
| colspan="2" | Une dernière ligne toujours affichée
|- class="test7"
| style="background:#AAAAAA"| Une dernière ligne...
| style="background:#AAAAAA"| ...pouvant être masquée
|}
</div>
</pre>

Donne :
<button type="button" name="test7" value="afficher" title="[-] Masquer les lignes grises"> [+] Afficher les lignes grises</button>

{| class="tableaustandard centre"
|- class="test7"
| colspan="2" style="background:#AAAAAA" | Une ligne pouvant être masquée
|-
| colspan="2" |Une ligne toujours affichée
|- class="test7"
| colspan="2" style="background:#AAAAAA" | Une autre ligne pouvant être masquée
|-
| Une autre ligne...
| ...toujours affichée
|-
| colspan="2" | Une dernière ligne toujours affichée
|- class="test7"
| style="background:#AAAAAA"| Une dernière ligne...
| style="background:#AAAAAA"| ...pouvant être masquée
|}

===== Définir comme cible une case =====
De la même manière, il est possible de définir une case comme cible, en ajoutant une classe propre à une cellule.

Par exemple :
<pre>
<button type="button" name="test8" value="masquer" title="[+] Afficher les cases grises"> [-] Masquer les cases grises</button>

{| class="tableaustandard centre"
|-
| Une case toujours affichée
| Une autre case toujours affichée
| class="test8" style="background:#AAAAAA"| Par contre cette case peut être masquée
|-
| colspan="2" | Une case sur deux colonnes toujours affichée
| rowspan="2" style="background:#AAAAAA" class="test8"| Une case de deux lignes pouvant être masquée
|-
| class="test8" style="background:#AAAAAA"| Une case qui peut être masquée
| Et une dernière toujours affichée<br>Mais qui se décale quand sa voisine disparaît
|}
</pre>

Donne :
<button type="button" name="test8" value="masquer" title="[+] Afficher les cases grises"> [-] Masquer les cases grises</button>

{| class="tableaustandard centre"
|-
| Une case toujours affichée
| Une autre case toujours affichée
| class="test8" style="background:#AAAAAA"| Par contre cette case peut être masquée
|-
| colspan="2" | Une case sur deux colonnes toujours affichée
| rowspan="2" style="background:#AAAAAA" class="test8"| Une case de deux lignes pouvant être masquée
|-
| class="test8" style="background:#AAAAAA"| Une case qui peut être masquée
| Et une dernière toujours affichée<br>Mais qui se décale quand sa voisine disparaît
|}

Notes:
* En masquant chacune des cases d'une colonne, on peut masquer toute la colonne.
* Si on masque une ou plusieurs cases d'une ligne sans les masquer toutes : la ou les cases restantes seront décalées le plus à gauche possible.

===Modifier l'apparence du bouton===

Un bouton est entièrement personnalisable. Vous pouvez changer son apparence comme vous le souhaitez : [Enrouler] ; •Cacher• ; ↑ -Masquer- ; etc.

Vous pouvez également utiliser <code>style=</code> pour définir sa taille, sa couleur, sa police, et tout ce qui pourrait vous passer par la tête. La couleur souhaitée est à indiquer en [http://www.html-color-names.com/color-chart.php nom html] ou en [http://www.code-couleur.com/ valeur hexadécimale].

Par exemple, vous pouvez créer un bouton vert comme ceci :
<pre>
<button type="button" name="test5" value="afficher" title="*Pouf*" style="color:green;">*Pif*</button>

<span class="test5">Mon bouton est vert.</span>
</pre>

Ce qui donnera :<br />
<button type="button" name="test5" value="afficher" title="*Pouf*" style="color:green;">*Pif*</button>&nbsp;&nbsp;&nbsp;&nbsp;<span class="test5">Mon bouton est vert.</span>

'''Rappelez-vous tout de même qu'il est préférable de conserver la couleur par défaut des boutons (bleu) dans les articles, par souci de lisibilité et de respect de la charte visuelle'''.

====[[Fichier:nocheck.png]] Symboles non-compatibles avec la personnalisation des boutons====
* point-virgule (''' ; ''')
* deux points (''' : ''')
* dièse (''' # ''')
* chevrons (''' < > ''')
'''Caractères déconseillés''' :
* accolades (''' <nowiki>{ }</nowiki> ''').
* barre verticale (''' | ''')

==Simplifiez-vous la vie : utilisez le modèle <nowiki>{{masquer}}</nowiki> !==

===[[Modèle:Masquer|<nowiki>{{masquer}}</nowiki>]] : Affichez et masquez tout ce que vous voulez ===

Ce modèle adapte le codage "à la main" pour simplifier sa mise en place :

<pre>
{{masquer
|{{{1}}}
|nom=
|cacher=
|afficher=
|voir=
|style=
|couleur=
}}
</pre>

Liste des arguments à définir pour la mise en place du modèle :

;{{{1}}} :
:Le contenu à afficher/masquer (un texte, une image, etc) >> seul argument obligatoire pour toutes les situations.
;nom (facultatif) :
:Nom de ''class'' à appliquer au contenu. Cet argument est <u>OBLIGATOIRE</u> si vous souhaitez mettre plusieurs modèles à contenu masqué dans une même page.
:Rappel: les noms de class ne peuvent pas contenir d'espace. Utilisez « - » ou « _ » si vous souhaitez séparer vos termes.
;cacher (facultatif) :
:Pour définir l'apparence du bouton masquant le contenu. ATTENTION : Certains caractères spéciaux ne sont pas compatibles (voir plus haut).
:Par défaut, l'apparence du bouton est la suivante : <span style="color:#0645AD">[Masquer]</span>
;afficher (facultatif) :
:Pour définir l'apparence du bouton affichant le contenu. ATTENTION : Certains caractères spéciaux ne sont pas compatibles (voir plus haut).
:Par défaut, l'apparence du bouton est la suivante : <span style="color:#0645AD">[Afficher]</span>
;voir (facultatif) :
:Indiquer ici si le contenu est visible ou non lors du chargement de la page. Par défaut, la valeur de cet argument est ''non''.
;style (facultatif) :
:Le style à appliquer au contenu à afficher/masquer.
;couleur (facultatif) :
:la couleur de mon bouton si je souhaite la changer (déconseillé dans le cadre d'un article).

===Par défaut===
En tapant simplement le code <code><nowiki>{{masquer|mon contenu masqué}}</nowiki></code>, vous obtenez :

{{masquer|mon contenu masqué}}

===Personnaliser l'apparence et le contenu===
Apparence et contenu du modèle peuvent être définis en détails.

Ainsi, en tapant par exemple :
<pre>
{{masquer
|Mon bouton est en vert. Mon texte est en gras et en rouge.
|nom=texte-rouge
|cacher=[-Cacher-]
|afficher=[-Montrer-]
|voir=oui
|style=color:red; font-weight:bold;
|couleur=#338833
}}</pre>

Vous obtiendrez :

{{masquer
|Mon bouton est en vert. Mon texte est en gras et en rouge.
|nom=texte-rouge
|cacher=[-Cacher-]
|afficher=[-Montrer-]
|voir=oui
|style=color:red; font-weight:bold;
|couleur=#338833
}}

Autre exemple :
<pre>{{masquer
|[[Image:LogoPoképédia2.png|thumb|left|C'est magique !]]
|nom=une-image
|cacher=•Je ne veux plus voir•
|afficher=•Je veux voir•
}}</pre>

Donnera :

{{masquer
|[[Image:LogoPoképédia2.png|thumb|left|C'est magique !]]
|nom=une-image
|cacher=•Je ne veux plus voir•
|afficher=•Je veux voir•
}}

[[Catégorie:Aide de Poképédia]]