Queremos que nuestro menú desplegable sea tabulado una vez expandido pero no tabulado cuando no esté expandido. Probamos tabindex="-1" en el contenido del div expandible, pero eso hizo que no se tabulara incluso una vez expandido. No tenemos idea de cómo resolver esto y agradeceríamos cualquier consejo.
<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>No sé exactamente qué quieres hacer, pero si quieres mostrar div.itemContent haciendo clic en button.itemHeader , puedes hacer esto:
-establecer display:none ; para div.itemContent
-use el evento onclick para button.itemHeader . Y llama a esta función:
function myfunction(){ document.getElementsByClassName[0]("itemContent").style.display=block; }