JavaScript How can I include document?addEventListener in this function.

[Studi]

I have a few dropdown selection lists and want them to exit if you click anywhere on the site/document(make the aria-expanded false) because at the moment it exits only if you click on itself or one of the items inside the dropdown.

const selection = document.querySelectorAll('.selection-selected');
const optionContainer = document.querySelectorAll('.options-container');

function toggleSelection() {
    const selectionToggle = this.getAttribute("aria-expanded");
    for (i = 0; i < selection.length; i++) {
      selection.setAttribute("aria-expanded", "false");
    }
    
    if (selectionToggle == "false") {
        this.setAttribute("aria-expanded", "true"); 
    }
}
selection.forEach(serviceItem => serviceItem.addEventListener("click", toggleSelection));

const channelSelection = document.querySelector('.channel');
const optionList = document.querySelectorAll('.channel-option');

optionList.forEach( o => {
  o.addEventListener("click", () => {
    channelSelection.innerHTML = o.querySelector("label").innerHTML;
    channelSelection.setAttribute("aria-expanded", "false");
    channelSelection.style.color = "#000";
    
  })
})

This is what I tried...

for (i = 0; i < selection.length; i++) {
  if(selection.ariaExpanded == "true") {
    document.addEventListener('click', () => {
      selection.setAttribute("aria-expanded", "false");
    })
  }
}

If anyone could help me with this please, thank you!

 

[Johna]

Have you checked the console for any errors?

 

[Studi]

Have you checked the console for any errors?

Yes, and I don't get any errors. But I can tell the if statement is not working the way I want. I mean without the if statement it's working properly but then I can't open the dropdown as it sets the aria expanded to false on all click when I want only after.