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
MarkBoots
MarkBoots13mo ago
think the <details> element can do that for you quick example https://codepen.io/MarkBoots/pen/GRPbQdp
Want results from more Discord servers?
Add your server