openam / bootstrap-responsive-tabs

Bootstrap responsive tabs are tabs that switch to collapsible components (accordions) when resized.
openam.github.io/bootstrap-responsive-tabs
MIT License
132 stars 60 forks source link

Maintain active state from tab li a to panel-heading #4

Open andrewjomelia opened 10 years ago

andrewjomelia commented 10 years ago

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.

mcestone4 commented 10 years ago

+1

cathallen14 commented 9 years ago

+1

RejeanLabbe commented 8 years ago

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 commented 8 years ago

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