« Aide:Afficher et masquer du contenu » : différence entre les versions

← Modification précédente Modification suivante →

Version du 20 janvier 2018 à 17:25

Cette page d'aide a été rédigée de manière à contenir le plus petit nombre de liens bleus possible, afin de faciliter sa lecture.

Avancé

Projet
—

Homonymie
—

Liens interwikis
—

Afficher et masquer du contenu
—

Mots magiques

Revenir au sommaire de l'aide

Ceci est une extension des possibilités du bouton "Enrouler/Dérouler", jusqu'ici uniquement présent en première ligne des tableau défini avec class="collapsible".
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 information au script par le biais du marqueur class=. Les arguments sont à séparer par un espace et l'ordre dans lequel les placer n'est pas obligatoire.
Prenons l'exemple de ce bouton :

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

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 masquer.; Faites attention à bien taper afficher ou masquer 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 :

<div class="classcible">Le contenu à afficher/masquer</div>

Si vous souhaitez qu'un autre bouton dispose d'une autre cible, donnez-lui un nom différent. Par exemple :

<div class="classcible2">Un autre contenu à afficher/masquer</div>

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.

Code:

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

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

Résultat:

Coucou !

Un bouton : plusieurs cibles

Un seul bouton permet l'affichage et le masquage de plusieurs contenus. Ces différents contenus doivent bien entendu être ciblés par la même class. Il est préférable de n'utiliser ce type de relation que dans les modèles ayant un contenu dense (un grand nombre de sections et de liens, par exemple).

Code:

<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>

Résultat:

Coucou ! Tu veux voir mon code ?

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 bouton en début et en fin d'affichage.

Code:

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

<span class="test3">Coucou !<br />Voici le contenu caché.<br />
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>

Résultat:

Coucou !
Voici le contenu caché.
Il prend plusieurs lignes et peut donc parfois se révéler assez dense.

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.

Code:

<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 bleu.<br />
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.<br />
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>

Résultat:

Coucou !
Voici le premier contenu caché, de couleur bleu.
Il prend plusieurs lignes et peut donc parfois se révéler assez dense.

Et hop !
Voici un deuxième contenu caché, de couleur rouge.
Il prend lui aussi de la place, surtout lorsqu'il est associé au premier.

Pour les tableaux

Affiché/Masqué l'intégralité du tableau

Un tableau peu être affiché ou masqué dans son intégralité de la même manière que le texte ou les images.

Par exemple :

<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>

Donne :

Un tableau affiché dans son intégralité
Avec toutes ses cases.

Affiché/Masqué une partie du tableau

Cependant pour affiché ou masqué seulement une partie d'un tableau il faut procéder autrement :

Utilisé un tableau enroulable

Utilisé un tableau enroulable (ou enroulable enroulé) permet au lecteur de pouvoir affiché ou masqué 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'information).

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 |- indiquant le passage à cette ligne.

Par exemple :

<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é
|-
| colspan="2" |Une ligne toujours affiché
|- class="test7"
| colspan="2" style="background:#AAAAAA" | Une autre ligne pouvant être masqué
|-
| Une autre ligne...
| ...toujours affiché
|-
| colspan="2" | Une dernière ligne toujours affiché
|- class="test7"
| style="background:#AAAAAA"| Une dernière ligne...
| style="background:#AAAAAA"| ...pouvant être masqué
|}
</div>

Donne :

Une ligne pouvant être masqué
Une ligne toujours affiché
Une autre ligne pouvant être masqué
Une autre ligne...	...toujours affiché
Une dernière ligne toujours affiché
Une dernière ligne...	...pouvant être masqué

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 a une cellule.

Par exemple :

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

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

Donne :

Une case toujours affiché	Une autre case toujours affiché	Par contre cette case peu être masqué
Une case sur deux colonnes toujours affiché		Une case de deux ligne pouvant être masqué
Une case qui peu être masqué	Et une dernière toujours affiché Mais qui se décale quand sa voisine disparaît	Une case de deux ligne pouvant être masqué

Notes:

En masquant chaqu'une des cases d'une colonne on peut masqué toute la colonne
Si on masque une ou plusieurs cases d'une colonne sans les masqués toutes : la case sera décalé.

Modifier l'apparence du bouton

Un bouton est entièrement personnalisable. Vous pouvez changer son apparence comme vous le souhaitez : [Enrouler] ; •Cacher• ; ↑ -Masquer- ; etc.<br< Vous pouvez également utiliser style= 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 nom html ou en valeur hexadécimale.

Par exemple, vous pouvez créer un bouton vert comme ceci :

<button type="button" name="test5" value="afficher" title="*Pouf*" style="color:green;">*Pif*</button>

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

Ce qui donnera :
Mon bouton est vert.

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.

Symboles non-compatibles avec la personnalisation des boutons

point-virgule ( ; )
deux points ( : )
dièse ( # )
chevrons ( < > )

Caractères déconseillés :

accolades ( { } ).
barre verticale ( | )

Simplifiez-vous la vie : utilisez le modèle {{masquer}} !

{{masquer}} : Affichez et masquez tout ce que vous voulez

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

{{masquer
|{{{1}}}
|nom=
|cacher=
|afficher=
|voir=
|style=
|couleur=
}}

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 OBLIGATOIRE 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 : [Masquer]
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 : [Afficher]
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 {{masquer|mon contenu masqué}}, vous obtenez :

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 :

{{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
}}

Vous obtiendrez :

Mon bouton est en vert. Mon texte est en gras et en rouge.

Autre exemple :

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

Donnera :