Our dropdown is tabbable even when not expanded

user_19163834 0
Viewed 26

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>
frontend css html javascript
1 Answers

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; }

user_172546940
Related