1 reply

Prevent tab navigation on child elements from a "collapsed" element

Hi, I'm making a container element that holds a list of items. This container can be collapsed or expanded, like an accordion, and I'm achieving this effect by adjusting the

max-height

max-height

property, which hides the elements inside of it visually but are still present in the DOM. Because of this, they are still reachable through tab navigation, but I'd like to avoid those items from being interacted with when the accordion is collapsed.

I thought that using

tabindex="-1"

tabindex="-1"

on the accordion or the list parent would be enough but it seems this attribute does not cascade to the children. Is there an easy way to do this using only HTML/CSS?

https://codepen.io/D10f/pen/MWZMOvx

Thanks!

KP-C

Kevin Powell - Community•3y ago•

1 reply

Joao

Prevent tab navigation on child elements from a "collapsed" element

Hi, I'm making a container element that holds a list of items. This container can be collapsed or expanded, like an accordion, and I'm achieving this effect by adjusting the

max-height

max-height

tabindex="-1"

tabindex="-1"

Prevent tab navigation on child elements from a "collapsed" element

Similar Threads

Prevent tab navigation on child elements from a "collapsed" element

Similar Threads

Similar Threads

Similar Threads