Comment agrandir et réduire une div en JavaScript ?
Voici les méthodes pour agrandir et réduire une division avec une animation.
Le langage JavaScript permet d'ajouter des animations pour rendre une page web plus dynamique. Voici les méthodes pour agrandir et réduire une division avec une animation.
Si vous utilisez la bibliothèque JQuery, vous pouvez essayer la bibliothèque de JQuery dédiée aux interactions graphiques, JQuery UI. Cette bibliothèque fournit la méthode acccordion(), qui permet d'ajouter des accordéons sur plusieurs divisions. Vous trouverez toutes les informations pour utiliser la méthode sur cette page.
Si vous voulez développer vous-même un système d'accordéon en JavaScript, il faut diviser votre division en 2 : l'en-tête sur lequel on cliquera pour afficher ou masquer le contenu, et le contenu :
<div class=container> <div class=entete> <span>Afficher</span> </div> <div class=contenu> <ul> <li>Contenu en texte</li> </ul> </div> </div>
Au niveau du CSS, masquez le contenu de la division par défaut, en fixant la propriété display à none :
.container .contenu {
display: none;
}
Dans le JavaScript, il faut ajouter une fonction qui s'exécutera lors d'un clic sur l'entête. Cette fonction fera appel à la méthode JQuery slideToggle qui affiche ou masque un contenu avec une animation. La fonction slideToogle prend en paramètre le nombre de millisecondes que dure l'animation et une fonction appelée à la fin de l'animation. On peut utiliser cette fonction pour modifier par exemple le texte affiché dans l'entête.
$(.entete).click(function () {
var entete = $(this);
//On récupère le contenu avec la fonction next, qui récupère l'élément suivant
var contenu = $(entete).next();
//Ouvre le contenu s'il est masqué, sinon le masque avec un effet de glissement
$(contenu).slideToggle(500, function () {
//On change le texte de l'entête suivant si le contenu est affiché ou non
$(entete).text(function () {
return $(contenu).is(:visible) ? Masquer : Afficher;
});
});
});