Snippets/Convert vectorMenu to vectorTabs

How to use Snippets
List of Snippets
Convert vectorMenu to vectorTabs
Language(s): JavaScript
Compatible with: MediaWiki 1.17+ (Vector)

Description edit

Changes the drop-down menus to tabs in the portlets added by Skin:Vector.

Deprecated by Snippets/Toggle between dropdown menus and tabs.

Tips edit

  • The code only uncollapses the #p-cactions portlet by default. To (also) uncollapse the #p-variants portlet, replace (or add it to) the selector: ( '#p-variants, #p-cactions' ).
  • The code creates a gap between portlets. To remove the gap, change the marginLeft value to -1px.

Code edit

/**
 * Convert Vector portlets menus to tabs.
 *
 * @source: https://www.mediawiki.org/wiki/Snippets/Convert_vectorMenu_to_vectorTabs
 * @rev: 3
 * @author: Edokter
 */

$(document).ready( function() {
    if ( mw.config.get( 'skin' ) == 'vector' ) {
        $( '#p-cactions' )
            .removeClass( 'vectorMenu' )
            .addClass( 'vectorTabs' )
            .css( 'margin-left', '0.5em' )
            .find( 'div.menu > ul' )
                .unwrap()
            .find( 'li > a' )
                .wrap( '<span></span>' );
    }
} );