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

Tracy Dirks
Celebrating 25 Years of Leadership: Tracy Dirks, President &amp; CEO of Beacon Technologies View this Story
Collage showing Beacon team members volunteering with animals.
Helping Furry Friends: Beacon Cares for Every Creature View this Story
Tricia
How Personalized SEO Keeps Your Site at the Top of Student Searches View this Story
Collage of Beacon volunteers working with children
Giving Back: Beacon Cares About Children and Education View this Story

Let's get to work!

Contact Us