MixItUp is a dependency-free JavaScript library for animated filtering, sorting, insertion, removal etc:

• MixItUp Homepage
• MixItUp GitHub

MixItUp is a pretty good library - easy to build nice filters. You need to buy the commercial license if you’re using it on a commercial project.

Bootstrap Conflict

There is a slight conflict with Bootstrap 3 dropdown elements. If you’re using a Bootstrap dropdown to display a list of filter elements, a MixItUp control is triggered when you click the dropdown. The data-toggle of the Bootstrap dropdown interferes wityh MixItUp This will probably hide all the elements that you’re trying to filter, as this element won’t have the required data-filter attribute.

Solution

For MixItUp >= 3.1, the solution is to specify the control element in the configuration object:

mixitup(container, {
    selectors: {
        control: '[data-mixitup-control]'
    }
}

… you then add the data-mixitup-control attribute to the filter controls.

JSFiddle

Resources

• GitHub issue with solution