MediaWiki:Gadget-guide.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* =============================================================================
   Gadget-guide.js — Tab switching for Quick Start guide pages
   ============================================================================= */
( function () {
    $( function () {
        $( '.guide-tabs' ).each( function () {
            var $nav    = $( this );
            var $tabs   = $nav.find( '.guide-tabs-nav .guide-tab-nav-item' );
            var $panels = $nav.find( '.guide-tab-panel' );
            if ( !$panels.length ) {
                $panels = $nav.nextAll( '.guide-tab-panel' );
            }

            if ( !$tabs.length || !$panels.length ) return;

            $tabs.first().addClass( 'is-active' );
            $panels.first().addClass( 'is-active' );

            function switchTab( target ) {
                $tabs.removeClass( 'is-active' );
                $panels.removeClass( 'is-active' );
                $tabs.filter( '[data-tab="' + target + '"]' ).addClass( 'is-active' );
                $panels.filter( '[data-panel="' + target + '"]' ).addClass( 'is-active' );
                $( 'html, body' ).animate( {
                    scrollTop: $nav.offset().top - 80
                }, 200 );
            }

            // Top nav tabs
            $tabs.on( 'click', function () {
                switchTab( $( this ).data( 'tab' ) );
            } );

            // Prev/next buttons inside panels — separate selector
            $nav.on( 'click', '.guide-tab-panel .guide-tab-nav-item', function () {
                switchTab( $( this ).data( 'tab' ) );
            } );

            // Also catch panel nav buttons that are siblings (outside .guide-tabs)
            $( document ).on( 'click', '.guide-tab-panel .guide-tab-nav-item', function () {
                switchTab( $( this ).data( 'tab' ) );
            } );
        } );
    } );
}() );