How to determine if a bootstrap collapse is opening or closing?
Bootstrap uses the aria-expanded attribute to show true or false if the region is collapsed or not.
var isExpanded = $(collapsableRegion).attr("aria-expanded");
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)
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');