Dev Notes

Software Development Resources by David Egan.

MixItUp JavaScript Filter with Bootstrap Dropdown Toggle

Filter, JavaScript
David Egan

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

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.


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.



comments powered by Disqus