How to get the clicked element in Bootstrap collapse event?

Question

I am having trouble to find the clicked anchor element in the collapse event using Bootstrap 3.3.4.:

$('.collapse').on('show.bs.collapse', function (e) {
    // Get clicked element that initiated the collapse...
});

I need this because I'd like to prevent collapsing if the clicked element has a certain data attribute. Another option would be to hook in by using .on('click', function()), however there are other events that occur on click that need to run so this seems a no-go to me. Searching in the DOM for the closest anchor or something similar won't work as well since there are multiple anchors next to eachother.

**http://jsfiddle.net/sheshu036/8s0mn0f4/5/** like this way you have multiple anchor tag? — sheshadri, Jun 02 '15 at 13:31
The anchors are placed somewhere else on the page, all next to eachother (disregarding default Boostrap HTML structure). — Propaganistas, Jun 02 '15 at 13:36

score 16 · Accepted Answer · answered Jun 05 '15 at 14:26

16

Since my case featured multiple anchors next to eachother (viz. disregarding regular Bootstrap structure), I ended up searching for the clicked anchor by using the collapsing div's ID:

$('.collapse').on('show.bs.collapse', function (e) {
    // Get clicked element that initiated the collapse...
    clicked = $(document).find("[href='#" + $(e.target).attr('id') + "']")
});

answered Jun 05 '15 at 14:26

Propaganistas

1,674
1
17
40

This will not work if the target in href is set as a class – redrobot Feb 12 '16 at 13:45

score 11 · Answer 2 · answered May 17 '16 at 15:21

11

Try this

$element.on('shown.bs.collapse', function(e) {
    var $clickedBtn = $(e.target).data('bs.collapse').$trigger;
});

answered May 17 '16 at 15:21

Alexey Kosov

3,010
2
23
32

1

This is the correct answer, and will work no matter how the document is structured. – Josh Adell Aug 04 '16 at 16:00
6

This only works for `shown.bs.collapse` event. Not for `show.bs.collapse` as data isn't set at the time. – dtrunk Aug 11 '16 at 11:22

score 3 · Answer 3 · answered Jan 17 '19 at 11:30

3

This is working in Bootstrap 4.2

$(".collapse").on('shown.bs.collapse', function(e){
    $clickedElement = $($(e.target).data('bs.collapse')._triggerArray);
});

answered Jan 17 '19 at 11:30

user3464977

47
1

score 2 · Answer 4 · answered Mar 31 '20 at 21:00

2

This worked for me:

$('#collapse').on('shown.bs.collapse', function (e) {
   // Get the clicked button element's text...
   questionTitle = $(e.target).parent().find('button').text().trim();
   console.log(questionTitle); 
})

answered Mar 31 '20 at 21:00

Adrian

171
2

score 1 · Answer 5 · answered Jun 02 '15 at 13:09

1

this should work: http://jsfiddle.net/8s0mn0f4/3/

    console.log($(e.target).siblings('.panel-heading').find('a'))

answered Jun 02 '15 at 13:09

Toni Feistauer

411
4
10

There are multiple anchors next to eachother. I only need the clicked one. – Propaganistas Jun 02 '15 at 13:15
1

Then maybe write your own click listener on the links and don't use the bootstrap API – Toni Feistauer Jun 02 '15 at 14:21

score 0 · Answer 6 · answered Feb 12 '16 at 13:49

This solution loops all collapse anchors and searches for the href target. It will work for both references by #id and by .class

In this example I use it to add the collapsed class to the clicked element.

    $(document).ready(function () {
        checkCollapsed();
    })

    function checkCollapsed() {
        $('.collapse').on('shown.bs.collapse', function (e) {
            triggerCollapsedClass();
        }).on('hidden.bs.collapse', function (e) {
            triggerCollapsedClass();
        });
    }

    function triggerCollapsedClass() {
        $("[data-toggle=collapse]").each(function (i, item) {
            var selector = $(item).attr("href");
            if ($(selector).hasClass("in")) {
                $(item).addClass("collapsed");
            } else {
                $(item).removeClass("collapsed");
            }
        })
    }

score 0 · Answer 7 · answered Jul 20 '17 at 13:59

When bootstrap's collapse fires, and a div element is shown it's class becomes panel-collapse collapse in.

I needed this so I could ajax content into the newly opened panel. You can add an id or data- attribute to that element that can help identify the anchor.

HTML

<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-X" aria-expanded="true" aria-controls="accordion-x" id="accordionanchor-X">
Information X  
</a>
…
<div id="collapse-x" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="pageheading-X">
    <div class="panel-body">
    …
    </div>
</div>

Javascript

$('.collapse').on("shown.bs.collapse", function (e) {
   var clicked = $(".panel-collapse.collapse.in").attr("id");
   alert("collapse " + clicked);
});

How to get the clicked element in Bootstrap collapse event?

7 Answers7

Linked