bootstrap-responsive-tabs
bootstrap-responsive-tabs copied to clipboard
Maintain active state from tab li a to panel-heading
When I change screen from lg to sm, the tab panel remains open as expected but I can't seem to figure out how to communicate the "active" state of the tab "li a" to the panel heading div so I can apply a style.
+1
+1
I made changes to set active class to the panel. I can now set a different style for the panel-heading in the CSS file.
`// 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');
// ************* change 1*****************
$(panelGroup).children('.panel').removeClass('active');
$(e.currentTarget).closest('.panel').addClass('active');
// ******************************
}
});
// ************* change 2 *****************
collapse.on('hidden.bs.collapse', function (e) {
if (fakewaffle.currentPosition === 'panel') {
// Remove the active class
var panelGroup = $(e.currentTarget).closest('.panel-group.responsive');
$(e.currentTarget).find('.panel-body').removeClass('active');
$(e.currentTarget).closest('.panel').removeClass('active');
}
});
// ******************************
`
I have also set the active class to the panel if there is an active tab
if ( activeTab ) {
$(activeTab).collapse('show');
// *************** change ****************
$tabGroup.children(".panel").addClass('active');
// *******************************
}