User:Wyang/Switcher.js

Note – after saving, you may have to bypass your browser’s cache to see the changes.

Mozilla / Firefox / Safari: hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (Command-R on a Macintosh);
Konqueror and Chrome: click Reload or press F5;
Opera: clear the cache in Tools → Preferences;
Internet Explorer: hold Ctrl while clicking Refresh, or press Ctrl-F5.

This script lacks a documentation subpage. Please create it.

Useful links: root page • root page’s subpages • links • redirects • your own

( function ( $ ) {
	'use strict';
	$( function () {
		$( '.switcher-container' ).each( function ( i ) {
			var activeElement, $showRadio, $showAllRadio;
			var elements = [], container = this;
			var radioName = 'switcher-' + i;
			$( this ).children().each( function () {
				var self = this;
				var $labelContainer = $( this ).find( '.switcher-label' );
				var $labelText = $labelContainer.contents();
				if ( !$labelText.length ) {
					return;
				}
				elements.push( this );
				$showRadio = $( '<input type="radio" />' ).attr( 'name', radioName ).click( function () {
					$( activeElement ).hide();
					$( self ).show();
					activeElement = self;
				} );
				$( '<label style="display:block"></label>' ).append( $showRadio ).append( $labelText ).appendTo( container );
				if ( !activeElement ) {
					activeElement = this;
					$showRadio.prop( 'checked', true );
				} else if ( $labelContainer.is( '[data-switcher-default]' ) ) { 
					$showRadio.click();
				} else {
					$( this ).hide();
				}
				$labelContainer.remove();
			} );
		} );
	} );
} )( jQuery );