How to get an item with a click in the Collup Collapse event?

Question

I'm having trouble finding a clicked anchor element in a 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 would like to prevent collapsing if the clicked element has a specific data attribute. Another option is to connect using .on('click', function()) , however there are other events that occur when clicked that need to be triggered, so this seems bad to me. A search in the DOM for the nearest anchor or something similar will not work, since there are several anchors next to eachother.

Answer 1

Since in my case there were several anchors next to eachother (namely, without taking into account the regular structure of Bootstrap), I ended up looking for the anchored anchor using the reset identifier div:

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

Answer 2

try it

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

Answer 3

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

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

Answer 4

This decision directs all reversals of collapse and searches for the href target. It will work for both links using #id and .class

In this example, I use it to add a collapsed class to a 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"); } }) } 

Answer 5

When loading fails and a div element is displayed, the class becomes panel-collapse collapse in .

I needed this so that I could add content to an open panel. You can add an identifier or data attribute to this element, which 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); }); 

Answer 6

This works in Bootstrap 4.2

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