Accentsconagua
Share
Dans le tutoriel d'aujourd'hui, nous allons apprendre à construire un composant show / hide avec CSS et un peu de JavaScript. Par défaut, jQuery fournit le slideToggle méthode qui nous permet de créer des accordéons avec un mouvement coulissant. Notre défi consiste à imiter cette fonctionnalité avec du JavaScript pur..
Voici le composant que nous allons créer:
Remarque: ceci est une fonctionnalité fournie nativement par le
Pour commencer, nous définissons un élément avec la classe de récipient qui contient deux sous-éléments:
Voici à quoi ça ressemble:
Le CSS est assez simple. Nous devons définir deux classes d’aide (c.-à-d.. cacher et spectacle).
Pour masquer et révéler l'élément cible, nous allons utiliser le la taille propriété, mais nous ne spécifierons pas ses valeurs en CSS. Au lieu de cela, nous allons définir dynamiquement les valeurs de hauteur via JavaScript.
Une chose à noter est que nous n'utilisons pas le afficher propriété pour basculer la visibilité de notre contenu. Cette propriété ne se compte pas parmi les propriétés CSS animables.
Voici les styles CSS correspondants:
.masquer display: none; .show display: flex; .info débordement: caché; transition: hauteur .5s;
Il est maintenant temps de discuter de la manière dont notre code JavaScript devrait fonctionner.
Premièrement, dès que le DOM est prêt, nous obtenons la hauteur du .Info élément et ensuite mettre immédiatement sa valeur à 0.
const info = document.querySelector (". info"); let infoHeight = info.offsetHeight; info.style.height = 0; N'oubliez pas qu'en fonction de votre contenu (par exemple, s'il contient des images), vous devrez peut-être inclure le code ci-dessus à l'intérieur du charge un événement.
Ensuite, quand le .bascule-btn bouton est cliqué nous faisons ce qui suit:
.Moins et .plus éléments..Info élément. Si la valeur est 0 (initialement, nous lui donnons cette valeur), cela signifie que le contenu est masqué. Nous le révélons donc en définissant sa hauteur égale à sa hauteur initiale (stockée dans le répertoire). infoHauteur variable). Par contre, si le contenu est visible, nous le masquons en réglant sa hauteur sur 0..bascule-btn sera cliqué une seule fois jusqu'à la fin de l'animation de la diapositive (elle dure 500 ms). Voici le code qui implémente tout ce comportement:
const toggleBtn = document.querySelector (". toggle-btn"); const info = document.querySelector (". info"); const less = document.querySelector (". less"); const more = document.querySelector (". more"); // hauteur initiale, laissez infoHeight = info.offsetHeight; toggleBtn.addEventListener ("click", function () this.disabled = true; more.classList.toggle ("show"); more.classList.toggle ("hide"); less.classList.toggle ("show") ; less.classList.toggle ("hide"); const infoNewHeight = info.offsetHeight; if (infoNewHeight == 0) info.style.height = '$ infoHeight px'; autre info.style.height = 0; setTimeout (() => this.disabled = false;, 500););La prochaine étape consiste à vérifier que le composant fonctionnera correctement lors du redimensionnement de la fenêtre du navigateur..
Voici le code JS nécessaire:
// définitions de variable ici window.addEventListener ("resize", () => info.style.removeProperty ("height"); infoHeight = info.offsetHeight; if (more.classList.contains ("hide")) info .style.height = '$ infoHeight px'; else info.style.height = 0;);Notre démo devrait bien fonctionner dans tous les navigateurs et appareils récents. De plus, comme d'habitude, nous utilisons Babel pour compiler le code ES6 jusqu'à ES5..
Dans ce court tutoriel, nous avons construit un composant d'affichage / masquage de style accordéon avec CSS et JavaScript. Merci à l'animable la taille propriété, nous avons réussi à ajouter un effet de diapositive à notre composant.
Notamment, nous n’avons pas pris en compte l’accessibilité. Par conséquent, si vous souhaitez améliorer ses fonctionnalités, cela pourrait certainement être la prochaine étape..
