Aide:Afficher et masquer du contenu
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.
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 class="enroulable".
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 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
afficheroumasqueren 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 boutons 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é. 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 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>
Résultat:
Coucou !
Voici le premier contenu caché, de couleur bleue.
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
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 :
<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. |
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 enroulable (ou enroulable enroulé) 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 |- 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é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>
Donne :
| Une ligne pouvant être masquée | |
| Une ligne toujours affichée | |
| Une autre ligne pouvant être masquée | |
| Une autre ligne... | ...toujours affichée |
| Une dernière ligne toujours affichée | |
| Une dernière ligne... | ...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 :
<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
|}
Donne :
| Une case toujours affichée | Une autre case toujours affichée | Par contre cette case peut être masquée |
| Une case sur deux colonnes toujours affichée | Une case de deux lignes pouvant être masquée | |
| Une case qui peut être masquée | Et une dernière toujours affichée 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 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 :
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 :
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 :
