What am I messing up in this accordion? Stutter related to child padding?

[jordank]

I've created a simplified demo of the accordion in question. As you can see when you collapse or expand the animation jumps a bit.

 

This seems to be related to the padding: 20px 0; and display: none; on .accordion-drawer. I'd like to keep these properties as display: none; is used for accessibly hiding the drawer. Padding is just for, well, padding.

 

Any thoughts? If there's another pattern for GSAP accordions that sidesteps these issues would love to see it!

 

https://codesandbox.io/s/gsap-accordion-9c92sf

[Rodrigo]

Hi,

 

It's always a good idea to wrap each item's content around an extra element and animate that element's height, which you can use for accessibility, like this example:

See the Pen JjeNMKd by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[jordank]

Interesting! So one thing I mean by accessibility is like in your example if there is a link in one of the accordion drawers it can receive focus via tab navigation as it is now.

 

I created a demo from your example. I replaced the accordion triggers with button elements and added a link in the first accordion drawer. To recreate try this.

 

1. Focus the first button with tab navigation.
2. Hit tab. You are focusing the link inside the first accordion drawer. This would be the accessibility issue I think.

So that is why I'm switching the display between block and hidden in my example but maybe there is a better way? It doesn't seem like aria-hidden: true; would work here since the children could be links.  Maybe adjusting tab index combined with aria-hidden would work.

 

See the Pen ZEmRWZX by jordank (@jordank) on CodePen

[jordank]

It seems like toggling between display: block; and display: hidden; won't work. From what I can tell GSAP is unable to figure out an elements height if its display is set to hidden and it or its children contain vertical padding.

 

If anyone has any thoughts on whether the above is true or not I'd be curious to hear.

 

Toggling between display between block and hidden is, from what I can tell, the best and recommended way to hide something fully and cleanly that shouldn't be seen by screen readers or tabbed to using tab navigation.

 

The best work around I've found so far involves setting inert and aria-hidden on the accordion drawer when collapsed.

 

In any case, it seems like the accordion posted in this message is meant to be the "official gsap demo" of how to build an accordion. If so I might recommend updating it so it's more accessible since right now it:

• Can't be interacted with using tab navigation. This can be fixed by changing the accordion trigger to a button.
• Links in the accordion drawer can be focused when the drawer is collapsed which breaks tab navigation. This could potentially be fixed by setting inert and aria-hidden on the drawer as appropriate whether its open or closed. Haven't fully vetted this yet but seems like an option.

As always, continuing to enjoy the library and the extremely helpful and kind forums members!

[akapowl]

1 hour ago, jordank said:

It seems like toggling between display: block; and display: hidden; won't work. From what I can tell GSAP is unable to figure out an elements height if its display is set to hidden and it or its children contain vertical padding.

 

If anyone has any thoughts on whether the above is true or not I'd be curious to hear.

Hello Jordan,

You keep repeating display: hidden throughout your last post, but you probably mean display: none instead, right?

AFAIK there is no value of hidden for the display property.

https://developer.mozilla.org/en-US/docs/Web/CSS/display#syntax

 

And I don't think it is GSAP not being able to figure out the height of an element that is set to display: none but more that this is just not how browsers work.

This example doesn't use any GSAP whatsoever; check out the logged heights in console for the two boxes in this example;
The one with display: none set returns an offsetHeight of 0.

 

While it is still available in the DOM, it won't be placed anywhere on the page and thus not take up any space because of the display setting.

 

See the Pen JjeZvpX by akapowl (@akapowl) on CodePen

 

 

When you set the display property to block; even if you set its height to 0px specifically, the browser will still consider the vertical padding of that box for its height; which explains that jump you see.

 

See the Pen LYXrrbO by akapowl (@akapowl) on CodePen

 

[jordank]

Haha, yes I meant display: none. Too much tailwind is messing with my head.

 

Yeah good point about everything having issues going from display: none; and height: 0; to display: block; and height: auto;.

 

I may revisit this with that in mind, thanks!

[jordank]

OK, basic idea is accordion drawers are display: none; unless the component is open, opening or closing. Then it is display: block;.

 

https://codesandbox.io/s/accessible-gsap-accordion-m4yjj2