DEV Community

Joe
Joe

Posted on

component #8 - Accordion

What I have learned?

  • How to make a simple accordion.

What are the main challenges?

animation. So I removed it instead. LOL

Why am I doing this anyway?

  • To learn.
  • To have fun.
  • To future Joimee (for reference).

Resources:
Component #7 Tabs

Salamat.

Top comments (1)

Collapse
 
khrome83 profile image
Zane Milakovic • Edited

Use max-height to animate opening and closing.

Basically the default setting is that max-height is zero for the content. Upon activating the content section, add a class or inline style that sets the max height to 36rem or something stupid. Something your content won’t hit. Then use css transitions to twean the opening and closing to your like.

Always animate in CSS over JavaScript if possible.

Sorry on my mobile phone otherwise I would give you code snippets. Hope this helps!