Médiaforma

Afficher un paragraphe en cliquant sur un bouton

Print Friendly

Pour alléger une page Web, il peut être utile de dissimuler certaines parties non essentielles tout en laissant le loisir aux internautes de révéler ces parties s’ils le souhaitent en cliquant sur un contrôle quelconque : un bouton ou un lien hypertexte par exemple. En mêlant quelques lignes de HTML, de CSS et de JavaScript, il est très simple de réaliser cet effet.

Le code HTML contient trois paragraphes délimités par les balises <p> et </p>. Le deuxième paragraphe est de classe cache et il est précédé d’un bouton d’identifiant bouton qui permettra de l’afficher ou de le dissimuler.

Le code CSS définit les caractéristiques de la balise d’identifiant cache. Par défaut, cette balise n’est pas affichée. Lorsqu’elle sera affichée, elle aura une bordure continue épaisse de 1 pixel et de couleur silver et une couleur d’arrière-plan jaune.

Lorsque le bouton est cliqué, la fonction JavaScript affiche() est exécutée. Examinons les instructions utilisées dans cette fonction. La première ligne s’intéresse au texte affiché dans le bouton. S’il est égal à « Montrer« , cela signifie que le paragraphe n’est pas affiché. Le texte du bouton se transforme en « Cacher » et la propriété display de la balise <p> est initialisée à block, ce qui a pour effet d’afficher le paragraphe.

Si le texte affiché dans le bouton n’est pas « Montrer« , cela signifie que le paragraphe est affiché. Dans ce cas, le texte du bouton se transforme en « Montrer » et la propriété display de la balise <p> est initialisée à none, ce qui a pour effet de dissimuler le paragraphe.

Voyons comment se comporte ce code dans un navigateur :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply