Nested Bootstrap Collapse active class Issue

Question

I have a nested Twitter bootstrap Repeater and I am trying to add active class to the opened collapse using the following script.

    function toggleChevronInner(e) {
        console.log('hello');
        $(e.target)
            .prev('.panel-heading')
            .find("i.indicator")
            .toggleClass('glyphicon-chevron-up glyphicon-chevron-down');

        $(e.target).prev('.panel-heading')
            .find("a")
            .toggleClass('active inactive');
    }
    $('#accordionInner').on('hidden.bs.collapse', toggleChevronInner);
    $('#accordionInner').on('shown.bs.collapse', toggleChevronInner);
    function toggleChevronMain(e) {
        console.log('hi');
        $(e.target)
            .prev('.panel-heading')
            .find("span.indicator")
            .toggleClass('glyphicon-triangle-top glyphicon-triangle-bottom');
        $(e.target).prev('.panel-heading')
            .find("a")
            .toggleClass('active inactive');
    }
    $('#accordion').on('hidden.bs.collapse', toggleChevronMain);
    $('#accordion').on('shown.bs.collapse', toggleChevronMain);

However, I saw a strange issue. When I am expanding the main Accordion i.e. #accordion, the function toggleChevronInner is also being called.

Why the behavior like this even after the IDs are different and how can it be fixed?

You can see it in action at http://jsbin.com/kagowi/1/edit?js,console,output . For Commodities it has nested collapse.

Answer 1

The reason it's happening is because of the way that events propagate.

Check the answer I gave to this question.

Because #accordionInner is a child of #accordion - AND because they're both listening for the same event, they'll both respond to it.

To fix it, do this:

function toggleChevronInner(e)
{
    e.stopPropagation();
    ...
}