0

I wrote bunch of codes which expands my accordion but here is a problem. When I click on button to expand accordion body, my listener calls twice.

Did anyone face this problem?

const accordionToggler = document.querySelectorAll('.accordion-toggler');
// expanding accordion by clicking on a single accordion toggler
accordionToggler.forEach(toggler => {
  toggler.addEventListener('click', (e) => {
    const caret = toggler.querySelector('.chevron-caret'); // chevron ico
    if (caret.classList.contains('rotate')) {
      caret.classList.remove('rotate')
    } else {
      caret.classList.add('rotate')
    }
    if (e.currentTarget.nextElementSibling.style.maxHeight === '' || e.currentTarget.nextElementSibling.style.maxHeight === '0px') {
      e.currentTarget.nextElementSibling.style.maxHeight = toggler.nextElementSibling.scrollHeight + 'px';
    } else {
      e.currentTarget.nextElementSibling.style.maxHeight = 0;
    }
    console.log('menu loop function click');
  });
  console.log('menu loop function');
});
// expanding accordion by clicking on a single accordion toggler
enter image description here
Daniel Firoozi
  • 100
  • 1
  • 10
  • Please post a [mcve] with HTML using the `[<>]` and then please delegate from the nearest container – mplungjan Jan 12 '22 at 11:04
  • You might look to use [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) on the accordian container. A single listener for all accordian buttons. – pilchard Jan 12 '22 at 11:05
  • They're not double subscription in code, so looks like the problem in HTML. But I agree with comments above that for such case is better to use event delegation, but it may not help you if you have problem in markup :) – maksimr Jan 12 '22 at 11:14
  • I added Html content – Daniel Firoozi Jan 12 '22 at 11:45

1 Answers1

0

You did not supply an example of your HTML, but I'm guessing your problem is that you have nested .accordion-toggler. clicking one of them means you clicked all of its parents. This has to do with event bubbling and capturing phases.

When you add an event listener you can control the phase of capturing this event. controlled by addEventListener third argument.

What you need is to use the event.stopPropagation inside your listener. You can read more about it here.

If you'll update your question with a complete code (and DOM) example then I'll be able to update my answer to be more accurate to your specific issue.

Another solution for your situation can be attaching only one event listener to the root of the accordion and then responding according to the targe. You can further read about currentTarget which you might also need in your case if you do want the parents to respond.

Here is a code example for that:

const rootAccordionToggler = document.querySelector('.parentOfAll > .accordion-toggler');
rootAccordionToggler.addEventListener('click', (e) => {
    const target = e.target;
    const caret = target.querySelector('.chevron-caret'); // chevron icon
    caret.classList.toggle('rotate');
    if (target.nextElementSibling.style.maxHeight === '' || target.nextElementSibling.style.maxHeight === '0px') {
        target.nextElementSibling.style.maxHeight = target.nextElementSibling.scrollHeight + 'px';
    } else {
        target.nextElementSibling.style.maxHeight = 0;
    }
});
Noam L
  • 119
  • 4