Javascript Training Series : Collapsible panels
ERROR
00:00
00:00

TUTO Javascript Training Series : Collapsible panels

Sébastien Imbert
8,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
On fait un toggle d'une class
Leçon 2
On utilise d'autres méthodes pour faire un toggle d'une class
Leçon 3
On fait un toggle sur plusieurs panels
Leçon 4
On ajoute une animation sur les icônes
Leçon 5
On anime l'apparition du contenu

Plan détaillé du cours

Leçon 1On fait un toggle d'une class
10m40s
Leçon 2On utilise d'autres méthodes pour faire un toggle d'une class
07m01s
Leçon 3On fait un toggle sur plusieurs panels
08m28s
Leçon 4On ajoute une animation sur les icônes
06m29s
Leçon 5On anime l'apparition du contenu
12m46s

Aperçus

Avis des apprenants

Détail des avis
35
Apprenants
5
Commentaires
4,8/5
Note moyenne
5/5
4
4/5
1
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 11/12/2023
Très bon tuto JavaScript. Les explications sont précises et complètes sur chaque point. J'utilise un peu JavaScript mais pas encore suffisamment à l'aise. Je me suis longtemps pris la tête pour les transitions en utilisant les display:none display:block. Je sais maintenant qu'il y a d'autres solutions et un grand merci pour ça :-) Pas simple mais pas impossible. j'ai pris beaucoup de notes en commentaires. A bientôt pour d'autres tutos tout aussi instructifs et utiles.
Membre-6010-4341
Membre-6010-4341
Publié le 22/06/2019
excellent tuto et excellent formateur. A quand l'épisode 5 ? :)
Daniel Dongar
Daniel Dongar
Publié 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.

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

JavaScript

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données