need to restyle top tabbed content for a mobile experience? this will make your tabs a dropdown for mobile.
$(".nav-tabs-top").each(function () {
var eachTab = $(this).find('li.tabbedcontent-header');
// create the dropdown
$("<div class='mobile-dropdown'><select /></div>").prependTo($(this));
// add dropdown options for all the tabs
for (i = 0; i < eachTab.length; i++) {
var tabName = $(eachTab[i]).find('a').text().trim(),
tabLink = $(eachTab[i]).find('a').attr('href').substr(1);
$('<option value=' + tabLink + '>' + tabName + '</option>').appendTo($(this).find('.mobile-dropdown select'));
}
// make the change function for our new dropdown
jQ171(this).find('.mobile-dropdown select').on('change', function () {
var matchingContent = $('.tab-content').find('div[id=' + $(this).val() + ']');
$('.tab-content .tab-pane').removeClass('active');
$(matchingContent).addClass('active');
});
});
.mobile-dropdown {
@media (min-width: 768px) {
display: none;
}
}
ul.nav-tabs {
@media (max-width: 767px) {
display: none;
}
}