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.

Community · Accepted Answer · 2017-05-23 11:58:08Z

2

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();
    ...
}

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Sep 19, 2015 at 7:11

Ragdata

1,1867 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Nested Bootstrap Collapse active class Issue

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related