Streaming live at 10am (PST)

Accordion... What am I doing wrong?

I swear I should have this down by now but I don’t… lol

Okay so when they open they are smooth but then they “snap” and do the same when you close and it overlaps other items when closing…

accordions at above link and below is my shared link

@sabanna I bet you’ll know right away!

@cyberdave would you know?

I know it’s a simple fix but I just can’t figure it out for the life of me! :sweat_smile:

  1. make dropdown list position: relative in closed state - you will get smooth closing interaction;
  2. instead of using padding on dropdown list, use same size margin on paragraph - dropdown list will shrink more smooth;
  3. set SAME top padding on the accordiontoggle in OPEN and CLOSED state - will be no jumping when accordion open-close
  4. change a bit steps in open interaction:
  • height = 0px
  • display = block
  • height = auto
1 Like

@sabanna this worked! But now how do I make it so when you click on another one the rest close?

This is possible right?

You can do this by using 2 similar triggers, but 1st would affect all dropdowns (close it) and 2nd would affect only sibling element (open it). But in this case, you will have to get rid of 2nd click part. Other ways it will mess up all animation

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.