CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
dannemp
dannemp

Reputation: 1019

On click stopPropagation while keeping bootstrap collapse behavior

I have a bootstrap list-group-item with a badge as follows:

<a class="list-group-item list-group-item-action" href="#" revision="211147" id="commit0">
    <span class="badge collapsed" id="badge0" data-toggle="collapse" data-target="#ul0" >
        changed files:1
    </span>
    <ul class="list-group changed-files-list collapse" id="ul0" aria-expanded="false" style="height: 0px;">
        <li class="list-group-item changed-file">
            release.groovy
        </li>
    </ul>
</a>

It contains a collapsed ul that is targeted by the badge.

At the same time, when clicked, the a element is selected(as it is part of a list-group with multiple selection possible).

I try to insert this bit of code:

$('.badge').on('click', function(e){
    //$('#'+this.id).click();
    e.stopPropagation();
});

so that when clicking on the badge the a element is not selected.

If I use this code the ul element is not being shown. I guess bootstrap uses the on click function and so it has something to do with my function overriding the bootstrap one.

How can I stop propagation while keeping the collapse behavior?

Upvotes: 3

Views: 3550

Answers (1)

dannemp
dannemp

Reputation: 1019

I found the solution by using bootstrap's collapse function:

$('.badge').click( function(e){
    $('#ul'+this.id.substring(5)).collapse("toggle");
    e.stopPropagation();
});

Upvotes: 2

Related Questions