Médiaforma

All posts tagged hide

Par défaut l’apparition et la disparition des éléments utilise un modèle de progression swing. Il est possible de modifier ce comportement par défaut en choisissant un modèle linear. Pour cela, il suffit de préciser la valeur ‘linear’ en deuxième paramètre des méthodes show() et hide() :

$('#zebre').show(3000,'linear');
$('#zebre').hide(3000,'linear');

Les méthodes show() et hide() permettent respectivement de faire apparaître et disparaître des éléments quelconques dans le DOM :

show(durée en millisecondes);
hide(durée en millisecondes);

 

Pour illustrer ces deux méthodes, nous allons permettre à l’utilisateur d’afficher et de cacher une image.

 

Saisissez le code suivant et sauvegardez-le sous le nom apparition-disparition.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Apparition et disparition d'un élément</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="zebre" src="zèbre.jpg"><br />
    <button id="afficher">Afficher l'image</button>
    <button id="cacher">Cacher l'image</button>
    <script>
      $(function() {
        $('#afficher').attr('disabled','disabled');
        $('#afficher').click(function(){
          $('#afficher').attr('disabled','disabled');
          $('#cacher').removeAttr('disabled');
          $('#zebre').show(3000);
        });
        $('#cacher').click(function(){
          $('#cacher').attr('disabled','disabled');
          $('#afficher').removeAttr('disabled');
          $('#zebre').hide(3000);
        });
      });
    </script>
  </body>
</html>

 

A l’affichage de la page, le bouton Afficher est désactivé :

$('#afficher').attr('disabled','disabled');

 

Lorsque le bouton #cacher est cliqué, il est désactivé et le bouton #afficher est activé :

$('#cacher').click(function(){
  $('#cacher').attr('disabled','disabled');
  $('#afficher').removeAttr('disabled');

 

L’image est alors cachée en 3000 millisecondes :

$('#zebre').hide(3000);

 

Inversement, lorsque le bouton #afficher est cliqué, il est désactivé et le bouton #cacher est activé :

$('#afficher').click(function(){
  $('#afficher').attr('disabled','disabled');
  $('#cacher').removeAttr('disabled');

 

L’image est alors affichée en 3000 millisecondes :

$('#zebre').show(3000);

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 :