Mixitup and Bootstrap Data Toggle Interference Solution

By Zedric Myers | Published February 18, 2020 | Categories: Web Development

If using Mixitup and Bootstrap data-toggle attributes on the same page, you will notice conflicts where the Mixitup "mixitup-control-active" class will be applied to all data-toggle references for a toggle button.

To remedy this, you can add the following code to your Mixitup buttons and Mixitup script.

Add this attribute to each button of the Mixitup buttons only.

data-mixitup-control=""

Example:

<button class="control control-color" data-mixitup-control="" data-toggle=".bachelors" type="button">BUTTON TEXT</button>

Next, add the following code to your Mixitup script.

var mixer = mixitup(containerEl, {
selectors: {
control: '[data-mixitup-control]'
},
controls: {
toggleDefault: 'all'
}
});