How to Build an Accordion With HTML, CSS, and JavaScript
Offered By: YouTube
Course Description
Overview
Continue building an accordion using HTML, CSS, and JavaScript in this second part of a two-part tutorial. Learn how to implement CSS styles for different accordion states, fix button focus styles, and add JavaScript functionality for opening and closing accordion sections. Explore techniques for getting parent and sibling elements in JavaScript, research methods for obtaining element heights, and implement smooth closing animations. By the end of this hands-on coding session, you'll have created a fully functional accordion component for web applications.
Syllabus
- Intro.
- Kite AI autocomplete tool!.
- Overview of the functionality for JavaScript.
- Starting to add CSS styles for the different accordion states.
- Fixing focused style on button.
- Adding styles for the accordion content.
- The button focused style strikes again!.
- Adding JavaScript for clicking to open accordion.
- Researching getting parent/sibling in JS.
- Adding JavaScript to close accordion.
- Researching getting height of elements.
- Adding JavaScript for closing animation.
- FINISHED! Seeing the whole accordion work .
Taught by
Coder Coder
Related Courses
Web DevelopmentUdacity Programming Languages
University of Virginia via Udacity Building a Basic Website
University of Massachusetts Amherst via Independent Web-Technologien
openHPI iDESWEB, Introducción al desarrollo web
MirÃadax