Mixitup and Bootstrap Data Toggle Interference Solution

Beacon Blog Article

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

Recent Posts

Beaconville booth with Kent and Emily
Hello from Beaconville: High Ed Conference Wrap-Up View this Story
Confetti and Balloons
Cue the Confetti: Celebrating 2022's Higher Ed Wins So Far View this Story
Beach scene with Beacon logo
Beacon Technologies Opens Second Location in Carolina Beach, NC View this Story
outline of person sitting at computer and cheering
Why You Need Audience Personas For Your Website Content View this Story

Let's get to work!

Contact Us