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

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

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 .