Escrito por

Roberto Segura



17 Noviembre 2015

I faced this issue for first time around 2012. Accordions/collapsable items weren't working properly. Sometimes a different element was hidden when going over tooltips, etc. It was not easy to debug and three years later I still receive support requests to solve it. Each time I have to fix it I need to search my fix so I decided to share it with you and myself.

First let me tell you that if you are loading jQuery and Mootools there is something wrong with the system you are dealing with. The first option if your site or extensions don't require Mootools is to disable it completely. I created a plugin that allows you to disable Mootools globally or add exceptions to load it only on specfic menu items that require it. You can find the Github repo here.

Ok but somehow you are unable to disable Mootools because you have an extension that still requires it, etc. or you develop templates that other users consume and you don't want to deal with this kind of support requests. There is a fix for you.

Add to your template.js (or your template javascript file) file this:

// Add missing Mootools when Bootstrap is loaded
        var bootstrapLoaded = (typeof $().carousel == 'function');
        var mootoolsLoaded = (typeof MooTools != 'undefined');
        if (bootstrapLoaded && mootoolsLoaded) {
                hide: function () {
                    return this;
                show: function (v) {
                    return this;
                slide: function (v) {
                    return this;

That creates dummy implementations for the missing Mootools functions.

This fix requires that you have jQuery loaded and if you are dealing with Mootools + jQuery is a good idea to add the call just before this javascript code.

This issue shouldn't affect Bootstrap 3 templates but the fix explained here should be compatible with both.

I hope this helps someone, myself included, in the future.