Using Twitter Bootstrap’s Collapse plugin for non-standard problems

26 Jul

Now I should explain, what do I mean when I say “non-standard problems”. Twitter Bootstrap’s Collapse plugin was apparently created for powering a web interface widget like the famous “accordion” widget. Why do I think so? Well the examples on their site are about making an accordion, for starters. Also when you try to create foldable list, the automatic operation of the plugin falls apart.

What is the Non-Standard Collapse problem?

Probably you have already found out that I tried to do a foldable list. To be more exact it is a foldable list of panels. When you click the heading of the panel, the body should disappear. Or appear, depending on the initial state of the panel.

So I tried to follow their example for the collapse plugin, and I encountered an annoying little bug. The thing was working as long as you don’t change the pages of the site. Once you change the pages of the site, the panels just start blinking, but not collapsing. So if you put an attribute on every panel, saying which element is its parent, opening one panel makes closing all other panels. Or most of them.

What was the solution?

That’s why I decided to look into the plugin’s code and see how they implemented the automatic mode (i.e. the one where you need no javascript code). There I have seen that they use the ‘toggle’ argument for the plugin’s function. And I tried it! I removed all custom attributes needed for an accordion and I’ve added a click handler which looks like this:

var action = {
  id: "some_id"
function (event) {
  var collapseBody = jQuery("#content" +;

Here the action variable is just a definition of a clojure I’m using at this place in the code and the function is the clickHandler which I pass as callback to the jQuery().click() function

And now everything works perfectly!