Tabbed pages advanced

This version of my original tabbed pages customisation adds the ability to link to specific tabs from other pages of your site. Check out the demo below:

Tab 1 Tab 2 Pricelist

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu diam vitae lorem blandit posuere vel a metus. Pellentesque porta elit faucibus sapien dapibus, vitae porttitor velit sollicitudin. Quisque consectetur elementum pharetra. Praesent sed odio quis magna fermentum tempor ut at nulla. Nam condimentum urna tincidunt tincidunt fringilla. Suspendisse euismod mi aliquam massa aliquam, id dignissim purus rutrum. Etiam imperdiet congue tortor, sed dapibus tellus congue aliquam. Aenean sit amet erat nec ipsum hendrerit interdum non quis justo. Nullam posuere ornare purus, nec laoreet augue porta et. Curabitur tincidunt non felis id volutpat.

Aenean laoreet bibendum leo non commodo. Nullam aliquet nisl vitae adipiscing consequat. Etiam consectetur augue eget diam pellentesque tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sollicitudin risus ipsum, nec vulputate mauris tristique vitae. Nulla eu ante dignissim, eleifend orci rutrum, porttitor tellus. Morbi dolor est, scelerisque vel facilisis ut, tempor sit amet magna. Proin nec nisi sed eros suscipit accumsan sed ultrices ligula. Maecenas a risus eu neque commodo iaculis ac vel elit. Fusce blandit vestibulum tortor, vitae facilisis urna adipiscing eget. Ut ullamcorper facilisis tellus, sed convallis odio dictum sed. In vitae est et turpis hendrerit accumsan sed at orci. Nam feugiat vulputate augue non viverra. Etiam sem velit, consequat et est a, molestie convallis risus.

This is my pricelist in Latin

Praesent euismod fringilla odio. Nulla lorem elit, aliquet id diam at, pulvinar varius turpis. Vestibulum ut dignissim augue. Proin felis lacus, aliquam sed lacinia et, accumsan sed felis. Nullam non viverra mauris, ut vehicula arcu. Cras augue augue, consectetur et diam id, ornare hendrerit magna. Vivamus interdum interdum dolor a euismod. Duis id ultricies lectus.

Installation

Add an HTML content block to your page and paste this HTML code into it:

<form action="">
	<div class="ss-tabs ss-tabs-sp1 ss-tabs-sp2 ss-tabs-sp3">
		<!-- Add more lines to these two groups to add additional tabs: -->
		<input id="ss-tab-radio-1" type="radio" name="ss-selected-tab" />
		<input id="ss-tab-radio-2" type="radio" name="ss-selected-tab" /> 
		<input id="ss-tab-radio-3" type="radio" name="ss-selected-tab" />

		<label for="ss-tab-radio-1" class="sm-panel-content sm-panel-flat">Tab 1</label>
		<label for="ss-tab-radio-2" class="sm-panel-content sm-panel-flat">Tab 2</label>
		<label for="ss-tab-radio-3" class="sm-panel-content sm-panel-flat">Tab 3</label>

		<!-- The bodies of each tab go here: -->
		<div class="sm-panel-content sm-panel-shadow sm-panel-padded">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu diam vitae lorem blandit posuere vel a metus. 
				Pellentesque porta elit faucibus sapien dapibus, vitae porttitor velit sollicitudin. Quisque consectetur elementum pharetra. 
				Praesent sed odio quis magna fermentum tempor ut at nulla. Nam condimentum urna tincidunt tincidunt fringilla. Suspendisse 
				euismod mi aliquam massa aliquam, id dignissim purus rutrum. Etiam imperdiet congue tortor, sed dapibus tellus congue aliquam. 
				Aenean sit amet erat nec ipsum hendrerit interdum non quis justo. Nullam posuere ornare purus, nec laoreet augue porta et. 
				Curabitur tincidunt non felis id volutpat.
			</p>
		</div>
		<div class="sm-panel-content sm-panel-shadow sm-panel-padded">
			<p>
				Aenean laoreet bibendum leo non commodo. Nullam aliquet nisl vitae adipiscing consequat. Etiam consectetur augue eget diam
				pellentesque tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam sollicitudin
				 risus ipsum, nec vulputate mauris tristique vitae. Nulla eu ante dignissim, eleifend orci rutrum, porttitor tellus. Morbi dolor est, 
				 scelerisque vel facilisis ut, tempor sit amet magna. Proin nec nisi sed eros suscipit accumsan sed ultrices ligula. Maecenas a risus
				 eu neque commodo iaculis ac vel elit. Fusce blandit vestibulum tortor, vitae facilisis urna adipiscing eget. Ut ullamcorper facilisis 
				 tellus, sed convallis odio dictum sed. In vitae est et turpis hendrerit accumsan sed at orci. Nam feugiat vulputate augue non viverra. 
				 Etiam sem velit, consequat et est a, molestie convallis risus.
			</p>
		</div>
		<div class="sm-panel-content sm-panel-shadow sm-panel-padded">
			<h3>This is my pricelist in Latin</h3>
			<p>
				Praesent euismod fringilla odio. Nulla lorem elit, aliquet id diam at, pulvinar varius turpis. Vestibulum ut dignissim augue. Proin felis 
				lacus, aliquam sed lacinia et, accumsan sed felis. Nullam non viverra mauris, ut vehicula arcu. Cras augue augue, consectetur et diam id, 
				ornare hendrerit magna. Vivamus interdum interdum dolor a euismod. Duis id ultricies lectus.
			</p>
		</div>
	</div>
</form>

You can add or remove tabs by duplicating the correct parts of that HTML code (hopefully this should be straightforward to spot.)

Add this CSS code to the CSS tab of that HTML content block:

.ss-tabs {
	position: relative;
	margin:1em 0;
}

/* Hide the radio buttons used to remember the selected tab by shoving them way off-screen */
.ss-tabs > input[type="radio"] {
	position: absolute;
	left: -9999px;
	top: -16px; /* Be a little above the top of the tabs so that the browser jumps to a nicer spot */
}

/* Default style for tab headers */

.ss-tabs > label, 
/* If an anchor is targeted, override the active state of default-first tabs */ 
.ss-tabs > input[type="radio"]:target ~ label,
/* If something is checked, override the active state of default-first and targeted tabs: */
.ss-tabs.ss-tabs-sp1.ss-tabs-sp2.ss-tabs-sp3 > input[type="radio"]:checked ~ label {
	display: inline-block;
	border-radius: 5px 5px 0 0;
	border-bottom: none;
	padding: 6px 14px 6px 14px;
	font-size: 105%;
	position: relative;
	z-index: 0;
	cursor: pointer;
	-webkit-box-shadow: none;
	box-shadow: none;
}

/* Active style of tab headers */

/* First tab is active by default: */
.ss-tabs > label:nth-of-type(1), 
/* Tabs selected by anchors: */
.ss-tabs > input[type="radio"]:nth-of-type(1):target ~ label:nth-of-type(1),
.ss-tabs > input[type="radio"]:nth-of-type(2):target ~ label:nth-of-type(2),
.ss-tabs > input[type="radio"]:nth-of-type(3):target ~ label:nth-of-type(3),
.ss-tabs > input[type="radio"]:nth-of-type(4):target ~ label:nth-of-type(4),
.ss-tabs > input[type="radio"]:nth-of-type(5):target ~ label:nth-of-type(5),
.ss-tabs > input[type="radio"]:nth-of-type(6):target ~ label:nth-of-type(6),
.ss-tabs > input[type="radio"]:nth-of-type(7):target ~ label:nth-of-type(7),
.ss-tabs > input[type="radio"]:nth-of-type(8):target ~ label:nth-of-type(8),
.ss-tabs > input[type="radio"]:nth-of-type(9):target ~ label:nth-of-type(9),
.ss-tabs > input[type="radio"]:nth-of-type(10):target ~ label:nth-of-type(10),
/* Tabs selected by being checked: */
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(1):checked ~ label:nth-of-type(1),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(2):checked ~ label:nth-of-type(2),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(3):checked ~ label:nth-of-type(3),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(4):checked ~ label:nth-of-type(4),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(5):checked ~ label:nth-of-type(5),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(6):checked ~ label:nth-of-type(6),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(7):checked ~ label:nth-of-type(7),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(8):checked ~ label:nth-of-type(8),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(9):checked ~ label:nth-of-type(9),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(10):checked ~ label:nth-of-type(10) {
	/* Grow a pixel taller */
	padding-bottom: 7px;
	margin-bottom: -1px;
	vertical-align: bottom;
	/* Float on top of the tab content panel border */  
	z-index: 2;
	-webkit-box-shadow: inset 0 10px 40px -22px rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 10px 40px -22px rgba(255, 255, 255, 0.3);
}

/* Tab body style */
.ss-tabs > div {
	position: relative;
	z-index: 1;
	border-radius: 0 5px 5px 5px;
}

/* Hide tab bodies */

.ss-tabs > div,
.ss-tabs > input[type="radio"]:target ~ div,
.ss-tabs.ss-tabs-sp1.ss-tabs-sp2.ss-tabs-sp3 > input[type="radio"]:checked ~ div {
	display: none;
}

/* Display tab bodies */

.ss-tabs > div:nth-of-type(1), 
/* Tabs selected by anchors: */
.ss-tabs > input[type="radio"]:nth-of-type(1):target ~ div:nth-of-type(1),
.ss-tabs > input[type="radio"]:nth-of-type(2):target ~ div:nth-of-type(2),
.ss-tabs > input[type="radio"]:nth-of-type(3):target ~ div:nth-of-type(3),
.ss-tabs > input[type="radio"]:nth-of-type(4):target ~ div:nth-of-type(4),
.ss-tabs > input[type="radio"]:nth-of-type(5):target ~ div:nth-of-type(5),
.ss-tabs > input[type="radio"]:nth-of-type(6):target ~ div:nth-of-type(6),
.ss-tabs > input[type="radio"]:nth-of-type(7):target ~ div:nth-of-type(7),
.ss-tabs > input[type="radio"]:nth-of-type(8):target ~ div:nth-of-type(8),
.ss-tabs > input[type="radio"]:nth-of-type(9):target ~ div:nth-of-type(9),
.ss-tabs > input[type="radio"]:nth-of-type(10):target ~ div:nth-of-type(10),
/* Tabs selected by being checked: */
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(1):checked ~ div:nth-of-type(1),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(2):checked ~ div:nth-of-type(2),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(3):checked ~ div:nth-of-type(3),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(4):checked ~ div:nth-of-type(4),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(5):checked ~ div:nth-of-type(5),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(6):checked ~ div:nth-of-type(6),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(7):checked ~ div:nth-of-type(7),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(8):checked ~ div:nth-of-type(8),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(9):checked ~ div:nth-of-type(9),
.ss-tabs.ss-tabs-sp1 > input[type="radio"]:nth-of-type(10):checked ~ div:nth-of-type(10) {
	display: block;
}

Linking to a specific tab

By default, the tabs are named in the HTML code like "ss-tab-radio-1", "ss-tab-radio-2" etc. You can rename those names in the HTML code (each name appears twice) to something prettier like "tab-pricelist" or "tab-photo-sizes". Then you can link people to a specific tab by adding a "#" followed by the tab name to the end of the link. For example:

http://www.sherlockphotography.org/Customisations/Tabbed-pages-advanced#tab-pricelist