title: Bootstrap collapse, callback after expand is complete
body: <p>I have a Bootstrap <a href="http://getbootstrap.com/javascript/#collapse" rel="noreferrer">collapse panel</a> in my webpage. I need to execute a function after the transition is complete and the panel has expanded fully. I have found this example for how to access the callback when the panel is collapsing and <code>hidden.bs.collapse</code> is added.
  <a href="https://stackoverflow.com/questions/13010315/how-to-trigger-a-javascript-function-after-bootstrap-collapse-plugin-transiti">How to trigger a JavaScript function after &quot;Bootstrap: collapse plugin&quot; transition is done</a>. </p>
  
  <p>But using similar code I can't seem to trigger when the <code>.collapse.in</code> class is applied.</p>
  
  <pre><code>$('#collapseExample').on('.collapse.in', function(){
      alert("hi");
   });
  </code></pre>
  
  <p>I also found this code using promises to trigger a function after a class is toggled. It is supposed to wait until all animations are complete. <a href="https://stackoverflow.com/questions/10321393/jquery-function-on-toggleclass-complete">jquery function on toggleClass complete?</a> This does not seem to work for my problem either.</p>
  
  <p>So I ask: <strong>How do I trigger a function when the collapse function is done?</strong></p>
  
  <p>This snippet attempts the jQuery promise technique. Ideally it would add the class <code>.red</code> after the panel is done expanding but it triggers immediately.
  <a href="http://www.bootply.com/Vx9oeyYy03#" rel="noreferrer">http://www.bootply.com/Vx9oeyYy03#</a></p>
  
  <pre><code>$(document).on('click', '.btn', function(){
      $('#collapseExample').collapse("toggle").promise().done(function () {
           $('.well').addClass('red');
      })
  });
  </code></pre>