YoVDO

How to Build an Accordion With HTML, CSS, and JavaScript

Offered By: YouTube

Tags

HTML & CSS Courses Computer Science Courses Javascript Courses HTML Courses

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 Development
Udacity
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