Accordion closing onClick anywhere in container

Question

I am trying to create an accordion for a project I'm working on. For the sake of argument, lets assume this accordion only has one container. So far, I've got it all working, however when I expand the accordion, which will only expend if I click on the header, I am then able to close the open container by clicking anywhere in the container, rather than just the header.

I've tried a few different things resulting in null.toggle errors so far. Below is a snippet of the accordion itself, along with the JS I'm using with it. Please bare in mind the accordion functions correctly and displays correctly, its the click function that's the issue (meaning my CSS is fine so no point sharing): JS:

const accordion = document.getElementsByClassName('container1');
for (i=0; i<accordion.length; i++) {
  accordion[i].addEventListener('click', function () {
    this.classList.toggle('active');
  });
}

Accordion HTML:

<div class="accordion-body">
  <div class="accordion">
      <hr>
    <div class="container1" id="container1">
      <div class="label" id="linkId">Generate a payment link</div>
          <div class="content">
              <div class="form">
    
              </div>
          </div>
     </div>
     <hr>
  </div>
</div>

Essentially, I only even want the accordion to open/close if the 'label' div is pressed. This is because within my accordion there are buttons, so at the moment when a button is pressed when accordion is open, it changes the class which closes the accordion back up. Right now I understand that the clickable area is 'container1' but I've not been able to make it work against the label div.

I can also provide a link to the webpage where it is happening, happy to provide this via PM.

I tried changing the JS to the below:

const accordion = document.getElementsByClassName('container1');
const linkId = document.getElementById('linkId');
for (i=0; i<accordion.length; i++) {
  document.getElementById('linkId').addEventListener('click', function () {
    accordion.classList.toggle('active');
  });
}

However the above produces the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'toggle') at HTMLDivElement. (txninfo.php:825:25)

LINE 825 is the following:

accordion.classList.toggle('active');

Any help would be massively appreciated

Answer 1

accordion in that case is instance of HTML-Collection and not Element as you assume.

So you correctly iterate over the collection of elements, you now just want to select the current element (where key == i) of iteration instead of the whole collection.

accordion[i].classList.toggle('active');

then you should have an Element and should be able to access it´s properties like classList

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName