Mixitup and Bootstrap Data Toggle Interference Solution

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'
}
});
Recent Posts

Hello from Beaconville: High Ed Conference Wrap-Up
View this Story

Cue the Confetti: Celebrating 2022's Higher Ed Wins So Far
View this Story

Beacon Technologies Opens Second Location in Carolina Beach, NC
View this Story

Why You Need Audience Personas For Your Website Content
View this Story