Build a Responsive, Animated Accordion That Looks Pretty Good

Build a Responsive, Animated Accordion That Looks Pretty Good

Kevin Powell via YouTube Direct link

- The HTML

4 of 19

4 of 19

- The HTML

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Build a Responsive, Animated Accordion That Looks Pretty Good

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - The inspiration for what I’m going to build
  3. 3 - Building things out the right way
  4. 4 - The HTML
  5. 5 - The SVG icons
  6. 6 - The generic CSS stuff
  7. 7 - Setting up the panel styles
  8. 8 - Styling the icons
  9. 9 - Setting up the size of the panels and fixing up the button
  10. 10 - Dealing with the overflowing text
  11. 11 - The JavaScript - adding the interactions
  12. 12 - Adding the animations
  13. 13 - Fixing up the typography and text positioning
  14. 14 - Making the text more readable
  15. 15 - Adding prefers-reduced-motion
  16. 16 - Adding a background to the titles
  17. 17 - Making it responsive
  18. 18 - Improving the keyboard interactions
  19. 19 - Using containment

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.