Réduire ou développer un div en JavaScript

jQuery est une bibliothèque javascript légère et très rapide. Il simplifie l’utilisation de JavaScript.

Une balise div est une balise de division. Il est utilisé pour définir une section dans un document HTML. Il sert également de conteneur pour d’autres éléments HTML.

Dans ce tutoriel, nous allons réduire ou développer un div en utilisant jQuery.

Vérifiez l’exemple ci-dessous.

<fieldset class="click" >
  <legend class="buttonMain" style="cursor: pointer">Expand</legend>
<div class="content" style="display:none">
  <p>Lorem ipsum...</p>
</div>

Le code HTML ci-dessus contient certains éléments, dont la balise div. Nous manipulons le div en utilisant jQuery pour le rendre réductible.

Dans jQuery, les méthodes show() et hide() sont utilisées pour afficher ou masquer n’importe quel élément en HTML.

Nous pouvons utiliser ces fonctions pour réduire ou développer la balise div comme indiqué ci-dessous.

$('.buttonMain').click(function() {
  if ($(this).text() == 'Expand') {
    $('.content').show();
    $(this).text('Collapse');
  } else {
    $('.content').hide();
    $(this).text('Expand');
  }
});

On peut aussi spécifier la vitesse de masquage et d’affichage des éléments en utilisant le paramètre speed dans ces fonctions. Nous pouvons déterminer sa valeur comme slow, fast ou la vitesse en millisecondes.