Switcher is a gadget that allows switching between pieces of content using radio buttons.

Usage

lemba

To enable it on a page, create a container element (div, span, etc.) with the "switcher-container" class. Inside of it, place each element to switch between. Within each child element, add <span class="switcher-label" style="display:none">Radio button label here</span> somewhere (it doesn't matter where). At this point, the switcher will be fully operational. If you want an element other than the first to be shown by default, add  data-switcher-default="" to the switcher-label element.

Example

lemba
<div class="switcher-container">
	<div>
		First content<span class="switcher-label">First show link</span>
	</div>
	<div>
		Second content<span class="switcher-label" data-switcher-default="">Second show link</span>
	</div>
	<div>
		Third content<span class="switcher-label">Third show link</span>
	</div>
</div>

First contentFirst show link

Second contentSecond show link

Third contentThird show link

Testing new features

lemba
<div class="switcher-container" data-switcher-label-style="display:inline">
	<div>
		First content<span class="switcher-label">First show link</span>
	</div>
	<div>
		Second content<span class="switcher-label" data-switcher-default="">Second show link</span>
	</div>
	<div>
		Third content<span class="switcher-label">Third show link</span>
	</div>
</div>

First contentFirst show link

Second contentSecond show link

Third contentThird show link

<div class="switcher-container" data-switcher-top-choices="">
	<div>
		First content<span class="switcher-label">First show link</span>
	</div>
	<div>
		Second content<span class="switcher-label" data-switcher-default="">Second show link</span>
	</div>
	<div>
		Third content<span class="switcher-label">Third show link</span>
	</div>
</div>

First contentFirst show link

Second contentSecond show link

Third contentThird show link

Code supporting Switcher

lemba

Module:Location map supports the Switcher syntax natively. It can be used to switch between multiple maps by calling it normally and separating the different map names with the # symbol. Templates that call Module:Location map, such as most infoboxes, can use this feature the same way.

Examples

lemba

Location map

lemba
{{Location map|United States Los Angeles Western#United States Los Angeles#USA California Southern#USA California#USA
| float = none
| lat_deg = 34.1014324
| lon_deg = -118.3270755
| caption = [[Broadway Hollywood Building]]
}}
 
 
 
 
Jackmcbarn/switcher (the Los Angeles metropolitan area)
 
 
Jackmcbarn/switcher (southern California)
 
 
Jackmcbarn/switcher (California)
 
 
Jackmcbarn/switcher (the United States)

Infobox building

lemba
{{Infobox building
| name                = Broadway Hollywood Building
| former_names        = Bernal H. Dyas Building
| alternate_names     = Broadway Department Store Building, Broadway Building
| status              = complete
| image               = 
| image_alt           = 
| image_size          = 
| caption             = 
| map_type            = United States Los Angeles Western#United States Los Angeles#USA California Southern#USA California#USA
| map_alt             = 
| map_caption         = 
| building_type       = 
| architectural_style = [[Classical revival]]
| location            = [[Hollywood]]
| address             = 6300 [[Hollywood Boulevard]] or 1645 [[Vine Street]]
| location_town       = [[Los Angeles, California]] 90028
| location_country    = United States
| iso_region          = 
| coordinates_display = 
| coordinates_format  = 
| latitude            = 34.1014324
| longitude           = -118.3270755
| coordinates         = 
| completion_date     = 1928
| opened_date         = 
| inauguration_date   = 
| renovation_date     = several
| height              = 
| architectural       = 
| tip                 = 
| antenna_spire       = 
| roof                = 
| top_floor           = 
| other_dimensions    = 
| floor_count         = 10
| elevator_count      = 
| architect           = Frederick Rice Dorn
| architecture_firm   = 
| awards              = 
| designations        = 
| ren_architect       = 
| ren_firm            = 
| ren_str_engineer    = 
| ren_serv_engineer   = 
| ren_civ_engineer    = 
| ren_oth_designers   = 
| ren_qty_surveyor    = 
| ren_awards          = 
| rooms               = 
| parking             = 
| url                 = 
| embedded            = 
| references          = 
}}
Broadway Hollywood Building
 
 
 
 
 
 
 
 
 
 
Former namesBernal H. Dyas Building
Alternative namesBroadway Department Store Building, Broadway Building
General information
StatusCompleted
Architectural styleClassical revival
LocationHollywood
Address6300 Hollywood Boulevard or 1645 Vine Street
Town or cityLos Angeles, California 90028
CountryUnited States
Coordinates34°06′05″N 118°19′37″W / 34.1014324°N 118.3270755°W / 34.1014324; -118.3270755
Completed1928
Renovatedseveral
Technical details
Floor count10
Design and construction
Architect(s)Frederick Rice Dorn