bootstrap-responsive-tabs icon indicating copy to clipboard operation
bootstrap-responsive-tabs copied to clipboard

Maintain active state from tab li a to panel-heading

Open andrewjomelia opened this issue 10 years ago • 4 comments

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.

andrewjomelia avatar Apr 04 '14 01:04 andrewjomelia

+1

mcestone4 avatar Apr 28 '14 20:04 mcestone4

+1

cathallen14 avatar Jan 27 '15 15:01 cathallen14

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');
        }
    });
// ******************************

`

RejeanLabbe avatar Feb 17 '16 14:02 RejeanLabbe

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');
                // *******************************
            }

RejeanLabbe avatar Feb 17 '16 14:02 RejeanLabbe