14

I'm trying to re-size iframe height after Bootstrap: collapse plugin transition is finished. Click event doesn't work because the transition is not finished yet, JavaScript gets the wrong height information. Any Idea to solve this issue?

Dasun
  • 3,244
  • 1
  • 29
  • 40

3 Answers3

25

You need to handle the hidden event on the collapse plugin.

From Docs

hidden - This event is fired when a collapse element has been hidden from the user (will wait for css transitions to complete).

$('#myCollapsible').on('hidden', function () {
  // do something…
})

As pointed by @Francesc in the comment for Bootstrap 3.0 we have to use

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})
leonardofmed
  • 842
  • 3
  • 13
  • 47
Ramesh
  • 13,043
  • 3
  • 52
  • 88
  • 3
    For new users, mind the bootstrap version, on 3.0 the name of the events is different: $('#myCollapsible').on('hidden.bs.collapse', function () { // do something… }). – Cesc Jan 30 '14 at 06:11
5

If you are using bootstrap 3.0 its pretty easy. shown.bs.collapse is the event that is fired when the element shown transition is complete. I believe you are looking for something like this.

$('#myCollapsible').on("shown.bs.collapse", function(){
 //trigger content change
 //this code will be triggered when the collapse transition is completed 
 //that is your myCollapsible element will have 'in' in your class
});
Mani
  • 61
  • 1
  • 2
2

I've never used the collapse plugin, but in the documentation it says there is a callback called 'hidden' that should be called once the element transition has finished:

$('#myCollapsible').on('hidden', function () {
    // do something…
});
manavo
  • 1,839
  • 2
  • 14
  • 17
  • 1
    Thank you. Ramesh and yours answers are same. I had to accept one by using tak tik tuk method. – Dasun Oct 22 '12 at 11:55