Dr. Laurin Ostermann

Bootstrap 3: accordion on non .panel divs

Ok, usually I try to keep my software-related posts rather general and not too tech-centered. But this time, I need to overstep my self-imposed boundary a little bit.

I have been working on this amazing WordPress- and Bootstrap-based website for the last couple of weeks and I am slowly but steadily converging to a final (publishable) result.

So far, I have never developed a WordPress theme from scratch, but this time I needed to, as a lot of specific accessibility requirements were demanded and I figured the best way to fulfill them would be to write the entire template by myself.

WordPress itself is just plain amazing: everything is so easy to implement, from listing posts, to shortcodes, to search. It’s very fun to code using it as a Framework for the backend. For the frontend I am using Bootstrap v3.3 and here is a glitch I found in it:

Upon trying to implement a collapse behaviour in my subnavigation, I discovered that the accordion feature would only work if my outermost class was named panel, which, of corse, meant that it was also styled like a panel. Apparently, this is a bug in Bootstrap (as of v3.3.5), but its solution was extremely simpel:

In the bootstrap.js I looked for “.panel” and found one single handler the accordion method was bound to. Replacing this “.panel” by “.accordion” (or anything else) and setting the outermost class of my accordion parent to “.accordion” resolved the issue. Maybe this is helpful for someone stuck with the same problem.

Next time, I’ll post something completely non-tech, I promise. 🙂

Categories: TechnologyTags: