When a user is focused on a heading in the example below and presses the down arrow key, I want it to remove the “inert” attribute from the section directly below it (not all sections), and I can’t figure out what’s wrong here:
<code><script>
document.querySelectorAll('.h-trigger:focus').forEach(el => {
el.addEventListener("keydown", e => {
if (["ArrowDown"].includes(e.key)) {
$(this).next(".section").removeAttr("inert","");
}
});
</script>
<h2 class="h-trigger" tabindex=0">Heading 1</h2>
<div class="section" inert>
Something here
</div>
<h3 class="h-trigger" tabindex=0">Heading 2</h3>
<div class="section" inert>
Something else here
</div>
</code>
<code><script>
document.querySelectorAll('.h-trigger:focus').forEach(el => {
el.addEventListener("keydown", e => {
if (["ArrowDown"].includes(e.key)) {
$(this).next(".section").removeAttr("inert","");
}
});
</script>
<h2 class="h-trigger" tabindex=0">Heading 1</h2>
<div class="section" inert>
Something here
</div>
<h3 class="h-trigger" tabindex=0">Heading 2</h3>
<div class="section" inert>
Something else here
</div>
</code>
<script>
document.querySelectorAll('.h-trigger:focus').forEach(el => {
el.addEventListener("keydown", e => {
if (["ArrowDown"].includes(e.key)) {
$(this).next(".section").removeAttr("inert","");
}
});
</script>
<h2 class="h-trigger" tabindex=0">Heading 1</h2>
<div class="section" inert>
Something here
</div>
<h3 class="h-trigger" tabindex=0">Heading 2</h3>
<div class="section" inert>
Something else here
</div>