View source for Archive/Tabs instead of menu in vector skin

===tabs instead of menu in vector skin===

This does not seem to work anymore, and since in my opinion the vector skin is obsolete, I will not bother to fix it.

;used methods:
*[[wpen:jQuery|jQuery]]: [https://api.jquery.com/removeClass/ removeClass], [https://api.jquery.com/addClass/ addClass], [https://api.jquery.com/css/ css], [https://api.jquery.com/find/ find], [https://api.jquery.com/unwrap/ unwrap], [https://api.jquery.com/wrap/ wrap], [https://api.jquery.com/appendTo/ appendTo], [https://api.jquery.com/children/ children]

;used in:[[wde:MediaWiki:Vector.js|MediaWiki:Vector.js]]

<syntaxhighlight lang="javascript">
/**
 * Convert Vector portlets menus to tabs.
 *
 * @source https://www.mediawiki.org/wiki/Snippets/Convert_vectorMenu_to_vectorTabs/Convert_vectorMenu_to_vectorTabs
 * @version 02.10.2015, adapted for Wiki Aventurica
 * @author [[med:User:Edokter]] on https://www.mediawiki.org
 */
$(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>' );
        $( "#ca-delete, #ca-undelete" ).appendTo( $( "#p-cactions" ).children("ul") );
    }
} );
</syntaxhighlight>

The following was the code I used before I found the more compact code above:

;used methods:
*[[wpen:jQuery|jQuery]]: [https://api.jquery.com/appendTo/ appendTo], [https://api.jquery.com/children/ children], [https://api.jquery.com/contents/ contents], [https://api.jquery.com/remove/ remove]

Only the "move" link will be converted to a tab:
<syntaxhighlight lang="javascript">
$( "#ca-move" ).appendTo( $( "#p-views" ).children("ul") );

$( "<span></span>" ).appendTo( "#ca-move" );

$( "#ca-move" ).contents().appendTo( $( "#ca-move" ).children("span") );
</syntaxhighlight>

All links are converted to tabs, and the menu removed:
<syntaxhighlight lang="javascript">
$( "#ca-move" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "#ca-purge" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "#ca-protect, #ca-unprotect" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "#ca-delete, #ca-undelete" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "#ca-watch, #ca-unwatch" ).appendTo( $( "#p-views" ).children("ul") );
 
$( "<span></span>" ).appendTo( "#ca-move, #ca-protect, #ca-unprotect, #ca-delete, #ca-undelete" );
 
$( "#ca-move" ).contents().appendTo( $( "#ca-move" ).children("span") );
 
$( "#ca-protect" ).contents().appendTo( $( "#ca-protect" ).children("span") );
 
$( "#ca-delete" ).contents().appendTo( $( "#ca-delete" ).children("span") );
 
$( "#ca-unprotect" ).contents().appendTo( $( "#ca-unprotect" ).children("span") );
 
$( "#ca-undelete" ).contents().appendTo( $( "#ca-undelete" ).children("span") );
 
$( "#p-cactions" ).remove();
</syntaxhighlight>