I have also faced the same problem, I fixed out with a solutions for that. I think it will be help full for you.
Note: While handling the bootstrap tab it will not have a responsive tab on mobile device, so it has to be initiated with collapsible grid as mentioned below...
This was previously experienced by me.
Here is my code link.
codepen.io/nehemc/pen/RRQKZB
Here is the code, you need to add in javascript.
<script>
var fakewaffle = (function($, fakewaffle) {
'use strict';
fakewaffle.responsiveTabs = function(collapseDisplayed) {
fakewaffle.currentPosition = 'tabs';
var tabGroups = $('.nav-tabs.responsive');
var hidden = '';
var visible = '';
var activeTab = '';
if (collapseDisplayed === undefined) {
collapseDisplayed = ['xs', 'sm'];
}
$.each(collapseDisplayed, function() {
hidden += ' hidden-' + this;
visible += ' visible-' + this;
});
$.each(tabGroups, function(index) {
var collapseDiv;
var $tabGroup = $(this);
var tabs = $tabGroup.find('li a');
if ($tabGroup.attr('id') === undefined) {
$tabGroup.attr('id', 'tabs-' + index);
}
collapseDiv = $('<div></div>', {
'class': 'panel-group responsive' + visible,
'id': 'collapse-' + $tabGroup.attr('id')
});
$.each(tabs, function() {
var $this = $(this);
var oldLinkClass = $this.attr('class') === undefined ? '' : $this.attr('class');
var newLinkClass = 'accordion-toggle';
var oldParentClass = $this.parent().attr('class') === undefined ? '' : $this.parent().attr('class');
var newParentClass = 'panel panel-default';
var newHash = $this.get(0).hash.replace('#', 'collapse-');
if (oldLinkClass.length > 0) {
newLinkClass += ' ' + oldLinkClass;
}
if (oldParentClass.length > 0) {
oldParentClass = oldParentClass.replace(/\bactive\b/g, '');
newParentClass += ' ' + oldParentClass;
newParentClass = newParentClass.replace(/\s{2,}/g, ' ');
newParentClass = newParentClass.replace(/^\s+|\s+$/g, '');
}
if ($this.parent().hasClass('active')) {
activeTab = '#' + newHash;
}
collapseDiv.append(
$('<div>').attr('class', newParentClass).html(
$('<div>').attr('class', 'panel-heading').html(
$('<h4>').attr('class', 'panel-title').html(
$('<a>', {
'class': newLinkClass,
'data-toggle': 'collapse',
'data-parent': '#collapse-' + $tabGroup.attr('id'),
'href': '#' + newHash,
'html': $this.html()
})
)
)
).append(
$('<div>', {
'id': newHash,
'class': 'panel-collapse collapse'
})
)
);
});
$tabGroup.next().after(collapseDiv);
$tabGroup.addClass(hidden);
$('.tab-content.responsive').addClass(hidden);
if (activeTab) {
$(activeTab).collapse('show');
}
});
fakewaffle.checkResize();
fakewaffle.bindTabToCollapse();
};
fakewaffle.checkResize = function() {
if ($('.panel-group.responsive').is(':visible') === true && fakewaffle.currentPosition === 'tabs') {
fakewaffle.tabToPanel();
fakewaffle.currentPosition = 'panel';
} else if ($('.panel-group.responsive').is(':visible') === false && fakewaffle.currentPosition === 'panel') {
fakewaffle.panelToTab();
fakewaffle.currentPosition = 'tabs';
}
};
fakewaffle.tabToPanel = function() {
var tabGroups = $('.nav-tabs.responsive');
$.each(tabGroups, function(index, tabGroup) {
// Find the tab
var tabContents = $(tabGroup).next('.tab-content').find('.tab-pane');
$.each(tabContents, function(index, tabContent) {
// Find the id to move the element to
var destinationId = $(tabContent).attr('id').replace(/^/, '#collapse-');
// Convert tab to panel and move to destination
$(tabContent)
.removeClass('tab-pane')
.addClass('panel-body fw-previous-tab-pane')
.appendTo($(destinationId));
});
});
};
fakewaffle.panelToTab = function() {
var panelGroups = $('.panel-group.responsive');
$.each(panelGroups, function(index, panelGroup) {
var destinationId = $(panelGroup).attr('id').replace('collapse-', '#');
var destination = $(destinationId).next('.tab-content')[0];
// Find the panel contents
var panelContents = $(panelGroup).find('.panel-body.fw-previous-tab-pane');
// Convert to tab and move to destination
panelContents
.removeClass('panel-body fw-previous-tab-pane')
.addClass('tab-pane')
.appendTo($(destination));
});
};
fakewaffle.bindTabToCollapse = function() {
var tabs = $('.nav-tabs.responsive').find('li a');
var collapse = $('.panel-group.responsive').find('.panel-collapse');
// Toggle the panels when the associated tab is toggled
tabs.on('shown.bs.tab', function(e) {
if (fakewaffle.currentPosition === 'tabs') {
var $current = $(e.currentTarget.hash.replace(/#/, '#collapse-'));
$current.collapse('show');
if (e.relatedTarget) {
var $previous = $(e.relatedTarget.hash.replace(/#/, '#collapse-'));
$previous.collapse('hide');
}
}
});
// Toggle the tab when the associated panel is toggled
collapse.on('shown.bs.collapse', function(e) {
if (fakewaffle.currentPosition === 'panel') {
// Activate current tabs
var current = $(e.target).context.id.replace(/collapse-/g, '#');
$('a[href="' + current + '"]').tab('show');
// Update the content with active
var panelGroup = $(e.currentTarget).closest('.panel-group.responsive');
$(panelGroup).find('.panel-body').removeClass('active');
$(e.currentTarget).find('.panel-body').addClass('active');
}
});
};
$(window).resize(function() {
fakewaffle.checkResize();
});
return fakewaffle;
}(window.jQuery, fakewaffle || {}));
(function($) {
fakewaffle.responsiveTabs(['xs', 'sm']);
})(jQuery);
$(document).ready(function() {
$('.tabcontainer .accordion-toggle').click(function() {
var divTarget = $(this).attr('href'),
divTargetElt = $(this);
setTimeout(function() {
console.log(divTarget);
$('html,body').animate({
scrollTop: divTargetElt.offset().top
},
'slow');
}, 500);
});
});
</script>
nav-justifieddoes look a little better, but it doesn't solve the separation problem between the active tab and its content pane. – Dice