Anyway to access the click event?

[keshav-c]

I want to add buttons to the accordion header. So when there is a click event, I need to be able to figure out whether I clicked the heading or the button in the heading. How do I do this?

[Alhadis]

Use event.stopImmediatePropagation() to prevent click events on buttons from bubbling up to their parent elements. So, assuming the following markup:

<li>
    <h3>
        Foo
        <button>Bar</button>
    </h3>
    <div class="fold">
        …
    </div>
</li>

… your code might look like this:

for(const el of document.querySelectorAll("button"))
    el.addEventListener("click", event => {
        event.stopImmediatePropagation();
        // Handle any other button behaviour here
    });

[keshav-c]

Thanks. This works.