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

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
Hannah and Kayla
How Web Design Can Make or Break Your Higher Ed Website View this Story
illustration of chess pieces
Why Content Strategy is a Must for Successful Higher Ed Marketing View this Story

Let's get to work!

Contact Us