We want our dropdown to be tabbable once expanded but non tabbable when not expanded. We have tried tabindex="-1" on the content in the expandable div but that made it non tabbable even once expanded. We have no idea on how to to solve this and would be grateful to any tips.
<div class="container">
<div class="accordionContent">
<div class="accordionItem">
<button class="itemHeader itemQuestion">
Text
<span class="itemIcon">
<i class="bx bx-chevron-down"></i>
</span>
</button>
<div class="itemContent">
<p class="itemAnswer">
<button>Example</button>
</p>
</div>
</div>
</div>
</div>
I dont know exactly what you want to do but If you want to showdiv.itemContent with click on the button.itemHeader you can do this :
-set display:none ;for div.itemContent
-use onclick event for button.itemHeader. And call this function :
function myfunction(){ document.getElementsByClassName[0]("itemContent").style.display=block; }