$ 8.00

Tuto Javascript Training Series : Collapsible panels avec JavaScript

$ 8.00

  • Une formation vidéo de 45m24s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Au cours de ce tutoriel 100% Javascript "collapsible panels", nous réaliserons un système de panneaux pliables (aussi appelés accordéons ou collapsible panels en anglais).
Parfois, une page peut contenir une quantité importante de texte et devenir lourde visuellement, notamment sur mobile.

Le principe des collapsible panels est de segmenter le contenu par sections composées d'un titre et du contenu qui lui est associé. Par défaut, le contenu est caché, et pour le rendre visible, l'utilisateur doit simplement cliquer sur le titre.

Le script que nous réalisons dans ce tuto devra s'adapter à un nombre indéterminé de panels, mais aussi à la hauteur du contenu, car chaque panels peut contenir une quantité différente de contenu.
 

Au cours de ce tuto Collapsible Panels en Javascript, nous verrons :

  • comment travailler avec la console du navigateur
  • comment faire un toggle d'une class au clic d'un élément (nous verrons 3 manières d'y arriver : en utilisant la méthode toggle(), en utilisant un booléen, et en utilisant une condition en if / else et la méthode contains()
  • l'opérateur ternaire
  • la méthode forEach() comme alternative à la boucle for
  • les propriétés qui permettent de récupérer les éléments du DOM comme nextElementSibling, childNodes, firstElementChild ...
  • comment récupérer la hauteur d'un élément avec la propriété clientHeight

Je reste disponible dans le salon d'entraide pour répondre à vos questions.

Quelques mots sur Javascript Training Series

Javascript Training Series est une série de tutoriels entièrement consacrée au Javascript. L'objectif est de vous aider à progresser en réalisant des exercices concrets.
Vous apprendrez à utiliser les propriétés et méthodes du Javascript, à créer des fonctions, des conditions, des boucles, écouter des événements, à réaliser vos scripts étape par étape à l'aider de la console du navigateur, et à commenter votre code.
Pour que vous puissiez aussi participer à la réalisation du script, je ne donne pas la solution de manière brutale, j'essaie de vous mettre sur la voie à chaque vidéo.
Dans ces tutos, je n'utilise pas de framework ou librairie, tous les scripts sont réalisés en Vanilla Javascript (Javascript pur).
Pourquoi faire du Vanilla Javascript ? Car une bonne maîtrise du Javascript entraînera une meilleure assimilation des frameworks et librairies (jQuery, Angular, React, Vue ...).
Pour résumer, Javascript Training Series à pour but de vous rendre meilleur et plus autonome en Javascript.

Table des matières de cette formation JavaScript (durée : 45m24s)

    • On fait un toggle d'une class 00:10:40
    • On utilise d'autres méthodes pour faire un toggle d'une class 00:07:01
    • On fait un toggle sur plusieurs panels 00:08:28
    • On ajoute une animation sur les icônes 00:06:29
    • On anime l'apparition du contenu 00:12:46



Formateur : Sébastien Imbert

Sébastien Imbert a publié 23 tutoriels et obtenu une note moyenne de 4,9/5 sur 4 517 tutoriels vendus. Voir les autres formations de Sébastien Imbert

5,0
note moyenne

2
avis laissés
5 étoiles
2
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-805-308 laissé le 08/05/2018
    L'un des meilleurs tutos que j'ai pu voir sur tuto.com. Merci, très beau boulot pédagogique dans le fond et sur la forme, et le sujet est très intéressant, vraiment satisfait.

  • 5
    avis de komarianne laissé le 22/02/2018
    Je commence à manquer de superlatifs concernant ce formateur :)... Encore une fois, un tuto où l'on apprend de façon intelligente, à la fois de façon 'théorique' via l'inspecteur et 'pratique' via l'éditeur de code. C'est le 1er tuto de cette série javascript que je suis - et bien que totalement novice, j'ai réussi à tout comprendre. Hautement recommandé !
    "Merci pour tes commentaires élogieux komarianne. Si tout a été compris alors que tu es débutante alors mission accomplie. ^^"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    JavaScript
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1103 tuto gratuits


non, je ne veux pas me former gratuitement