I have been trying to figure out on i can MixItUp plugin on Bootstrap tabs. My issue here on the first tab it works perfectly and functions correctly as seen here in the screenshot
But when I check the second tab it has no content then the sorting/filter doesn’t work.
I have been searching for answers on the docs to apply the plugin with tabs.
Here the code of my recent work.
<body>
<section class="container12">
<section class="column3 search_filter"> <!--START COL3-->
<div class="refine_search">
<h2>Refine Search</h2>
<form class="controls" id="Filters">
<!--RATING FILTER -->
<fieldset>
<h4>Rating</h4>
<div class="checkbox">
<input class="filter-one filter-two" type="checkbox" value=".fivestars"/>
<label>5 Stars</label>
</div>
<div class="checkbox">
<input type="checkbox" value=".fourstars"/>
<label>4 Stars</label>
</div>
<div class="checkbox">
<input type="checkbox" value=".threestars"/>
<label>3 Stars</label>
</div>
<div class="checkbox">
<input type="checkbox" value=".twostars"/>
<label>2 Stars</label>
</div>
<div class="checkbox">
<input type="checkbox" value=".onestar"/>
<label>1 Star</label>
</div>
</fieldset>
</form>
</div>
</section> <!--END COL3 -->
<div class="column9 search-filter">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#philippines">Philippines</a></li>
<li><a href="#malaysia">Malaysia</a></li>
<li><a href="#singapore">Singapore</a></li>
<li><a href="#hongkong">Hong Kong</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="philippines">
<div id="Container" class="column9 alpha search_results container ">
<div class="hotels mix fivestars">
<div class="hotel_thumbnail_container">
<div class="hotel_thumbnail">
</div>
</div>
<div class="hotel_details ">
<h3><a class="post_title" href="#" rel="bookmark" title="Hotel Post">Hotels</a></h3>
<span class="hotel_location">Philippines</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget condimentum diam, quis condimentum odio. Integer facilisis luctus dui eu adipiscing. </p>
</div>
<div class="book_now">
<span class="hotel_rating fivestars ">Hotel Rating</span>
<h4 class="hotel_price">PHP<span>6000</span></h4>
<span class="book_link"><a href="">Book Now</a></span>
</div>
</div>
<div class="hotels mix fourstars">
<div class="hotel_thumbnail_container">
<div class="hotel_thumbnail">
</div>
</div>
<div class="hotel_details ">
<h3><a class="post_title" href="#" rel="bookmark" title="Hotel Post">Hotels</a></h3>
<span class="hotel_location">Philippines</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget condimentum diam, quis condimentum odio. Integer facilisis luctus dui eu adipiscing. </p>
</div>
<div class="book_now">
<span class="hotel_rating fivestars ">Hotel Rating</span>
<h4 class="hotel_price">PHP<span>6000</span></h4>
<span class="book_link"><a href="">Book Now</a></span>
</div>
</div>
<?php endwhile; endif; wp_reset_query();?>
</div>
</div>
<div class="tab-pane" id="malaysia">
<div id="Container" class="column9 alpha search_results container ">
<div class="hotels mix fivestars">
<div class="hotel_thumbnail_container">
<div class="hotel_thumbnail">
</div>
</div>
<div class="hotel_details ">
<h3><a class="post_title" href="#" rel="bookmark" title="Hotel Post">Hotels</a></h3>
<span class="hotel_location">Philippines</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget condimentum diam, quis condimentum odio. Integer facilisis luctus dui eu adipiscing. </p>
</div>
<div class="book_now">
<span class="hotel_rating fivestars ">Hotel Rating</span>
<h4 class="hotel_price">PHP<span>6000</span></h4>
<span class="book_link"><a href="">Book Now</a></span>
</div>
</div>
<div class="hotels mix fourstars">
<div class="hotel_thumbnail_container">
<div class="hotel_thumbnail">
</div>
</div>
<div class="hotel_details ">
<h3><a class="post_title" href="#" rel="bookmark" title="Hotel Post">Hotels</a></h3>
<span class="hotel_location">Philippines</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget condimentum diam, quis condimentum odio. Integer facilisis luctus dui eu adipiscing. </p>
</div>
<div class="book_now">
<span class="hotel_rating fivestars ">Hotel Rating</span>
<h4 class="hotel_price">PHP<span>6000</span></h4>
<span class="book_link"><a href="">Book Now</a></span>
</div>
</div>
<?php endwhile; endif; wp_reset_query();?>
</div>
</div>
<div class="tab-pane" id="singapore">
hotels
</div>
<div class="tab-pane" id="hongkong">
cruises
</div>
</div>
</div>
</section>
<script>
var checkboxFilter = {
$filters: null,
$reset: null,
groups: [],
outputArray: [],
outputString: '',
init: function(){
var self = this;
self.$filters = $('#Filters');
self.$reset = $('#Reset');
self.$container = $('#Container');
self.$filters.find('fieldset').each(function(){
self.groups.push({
$inputs: $(this).find('input'),
active: [],
tracker: false
});
});
self.bindHandlers();
},
bindHandlers: function(){
var self = this;
self.$filters.on('change', function(){
self.parseFilters();
});
self.$reset.on('click', function(e){
e.preventDefault();
self.$filters[0].reset();
self.parseFilters();
});
},
parseFilters: function(){
var self = this;
for(var i = 0, group; group = self.groups[i]; i++){
group.active = []; // reset arrays
group.$inputs.each(function(){
$(this).is(':checked') && group.active.push(this.value);
});
group.active.length && (group.tracker = 0);
}
self.concatenate();
},
concatenate: function(){
var self = this,
cache = '',
crawled = false,
checkTrackers = function(){
var done = 0;
for(var i = 0, group; group = self.groups[i]; i++){
(group.tracker === false) && done++;
}
return (done < self.groups.length);
},
crawl = function(){
for(var i = 0, group; group = self.groups[i]; i++){
group.active[group.tracker] && (cache += group.active[group.tracker]);
if(i === self.groups.length - 1){
self.outputArray.push(cache);
cache = '';
updateTrackers();
}
}
},
updateTrackers = function(){
for(var i = self.groups.length - 1; i > -1; i--){
var group = self.groups[i];
if(group.active[group.tracker + 1]){
group.tracker++;
break;
} else if(i > 0){
group.tracker && (group.tracker = 0);
} else {
crawled = true;
}
}
};
self.outputArray = [];
do{
crawl();
}
while(!crawled && checkTrackers());
self.outputString = self.outputArray.join();
!self.outputString.length && (self.outputString = 'all');
if(self.$container.mixItUp('isLoaded')){
self.$container.mixItUp('filter', self.outputString);
}
}
};
$(function(){
checkboxFilter.init();
$('#Container').mixItUp({
animation: {
easing: 'linear',
duration: 400,
}
});
});
</script>
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
</script>
</body>