How to determine if a bootstrap collapse is opening or closing?

Question

If I have a bootstrap collapse how can I determine from a click event wether the collapse is opening or closing?

Here is my click event or maybe there is a better way then to use a click event?

$(document).on("click", "a.register-student-link", function() {
    // do some stuff to check if opening or closing
}

<div>
  <a id=@space.EventId class="register-student-link" data-toggle="collapse" href=@spaceIdWith aria-expanded="false" aria-controls="collapseExample">
                                                    Register Student
                                                </a>
</div>

score 37 · Answer 1 · answered Oct 13 '15 at 03:49

37

Bootstrap uses the aria-expanded attribute to show true or false if the region is collapsed or not.

var isExpanded = $(collapsableRegion).attr("aria-expanded");

answered Oct 13 '15 at 03:49

user1186050

10,710
18
92
235

3

For anyone struggling with getting this to work; make sure you initialise the `aria-expanded` attribute to `true` or `false` in the HTML! – slugmandrew Apr 10 '19 at 15:47
This might be true and probably helped you, seeing this answer is made by the OP. However, if I read through the question itself (which I had too), this does not answer it at all. The answer below (with shown.bs.collapse) works like a charm and answer the true question of "how to determine the collapse event". I think that should be marked as the correct answer. – Kalko Jun 04 '19 at 14:30
Thanks. This helped! – Adil Aslam Sachwani Jan 16 '21 at 14:13

score 33 · Answer 2 · edited May 23 '17 at 10:31

Try:

$('#collapseDiv').on('shown.bs.collapse', function () {
   console.log("Opened")
});

$('#collapseDiv').on('hidden.bs.collapse', function () {
   console.log("Closed")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div>
  <a id=@space.EventId class="register-student-link" data-toggle="collapse" href="#collapseDiv" aria-expanded="false" aria-controls="collapseExample">Register Student</a>
</div>

<div class="collapse" id="collapseDiv">This is the collapsible content!</div>

(based on https://stackoverflow.com/a/18147817/2033574 (Kevin mentioned) and http://www.bootply.com/73101)

score 24 · Answer 3 · answered Sep 24 '16 at 01:06

I needed a way to determine if the element was collapsed BEFORE actually collapsing. Whereas the event listeners only trigger afterwards.

//Will return true if uncollapsed
$('#collapseDiv').hasClass('in');

//Will return true if in the process of collapsing
$('#collapseDiv').hasClass('collapsing');

//Will return true if collapsed
$('#collapseDiv').hasClass('collapse');

Kevin Friedheim · Answer 4 · 2015-10-13T01:31:35.410

3

You can watch the event hidden.bs.collapse

see fiddle: http://jsfiddle.net/kyeuvx1d/

edited Oct 13 '15 at 01:31

answered Oct 13 '15 at 00:50

Kevin Friedheim

314
1
9

bootstrap collapse doesn' t have this – user1186050 Oct 13 '15 at 00:59
Here is another post with a simlilar answer: http://stackoverflow.com/questions/18147338/twitter-bootstrap-3-0-icon-change-on-collapse – Kevin Friedheim Oct 13 '15 at 01:32

sam007 · Answer 5 · 2019-12-31T07:27:31.387

1

if(!$("#id").hasClass('show')){
    alert("Uncollapsed");
}
else {
    alert("Collapsed");
}

for Bootstrap 4

edited Dec 31 '19 at 07:27

answered Dec 30 '19 at 08:10

sam007

59
6

How to determine if a bootstrap collapse is opening or closing?

5 Answers5

Linked