Menu
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?
316
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from its current value to 0 . Given how CSS handles animations, you cannot use padding on a . collapse element.
Bootstrap's collapse class exposes a few events for hooking into collapse functionality. This event fires immediately when the show instance method is called. This event is fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
The . collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
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…
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
