I’m trying to create a simple button to open/close a collapsible part of my website implemented in twitter bootstrap. I’d like to use the collapsible javascript plugin, but it doesn’t seem to work just right: The folding animation happens “on close”, but “on open” it’s instantaneous.
Here’s a jsFiddle demostrating the issue.
On my navigator (Chrome 22.0.1229.94 on mac) the first time the button is clicked, the h2 “pops in” instantaneously. Clicking the button again “folds” the h2 with a nice animation. Clicking again “shows it” very quickly.
How can I have the animation work “when opening” as well as “when closing”? Should I add more html/css, or maybe change some js?
Also, I’ve noticed that this happens with jquery 1.8.2 and the latest twitter boostrap. With jquery 1.7.2 and bootstrap 2.0.2 it seems to work just fine. I’d like to use the latest of both if possible.
Ok I have found the problem. It’s right there in the docs:
In my defense, I must say that that part was grayed out and was not very evident as a requirement.
Once I included the transitions module, the animations started working again:
http://jsfiddle.net/whUvL/4/
Kudos to @funzionpro, who put me on the right track – once I knew that including the complete set of javascripts it worked, the rest was easy to deduce.
(I will mark this answer as correct in two days, until then I must leave it open because SO’s policies regarding auto-responses)