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 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" 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!1 Reply
think the <details> element can do that for you
quick example https://codepen.io/MarkBoots/pen/GRPbQdp