Build a Responsive, Animated Accordion That Looks Pretty Good

This course demonstrates how to build a responsive animated accordion using HTML, SVG icons, CSS, and JavaScript. It covers panel sizing, overflow, typography, keyboard interactions, reduced-motion preferences, and CSS containment.

Syllabus

- Introduction
- The inspiration for what I’m going to build
- Building things out the right way
- The HTML
- The SVG icons
- The generic CSS stuff
- Setting up the panel styles
- Styling the icons
- Setting up the size of the panels and fixing up the button
- Dealing with the overflowing text
- The JavaScript - adding the interactions
- Adding the animations
- Fixing up the typography and text positioning
- Making the text more readable
- Adding prefers-reduced-motion
- Adding a background to the titles
- Making it responsive
- Improving the keyboard interactions
- Using containment