---
{
	"title": "Tabbed Interface",
	"language": "en",
	"category": "Plugins",
	"description": "Dynamically stacks multiple sections of content, transforming them into a tabbed interface.",
	"tag": "tabs",
	"parentdir": "tabs",
	"altLangPrefix": "tabs",
	"dateModified": "2015-02-24"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>Dynamically stacks multiple sections of content, transforming them into a tabbed interface.</p>
</section>

<section>
	<h2>Example 1</h2>
	<p>With session storage to remember last tab viewed. (Default behaviour)</p>
	<div class="wb-tabs">
		<div class="tabpanels">
			<details id="details-panel1">
				<summary>Example 1</summary>
				<p>
				From time immemorial the Norsemen <a href="#details-panel3">Example 3</a> were among the most daring and
				skilful mariners ever known. They built great wooden boats with tall,
				sweeping bows and sterns. These ships, though open and without decks,
				were yet stout and seaworthy. Their remains have been found, at times
				lying deeply buried under the sand and preserved almost intact. One
				such vessel, discovered on the shore of Denmark, measured 72 feet in
				length. Another Viking ship, which was dug up in Norway, and which is
				preserved in the museum at Christiania, was 78 feet long and 17 feet
				wide. One of the old Norse sagas, or stories, tells how King Olaf
				Tryggvesson built a ship, the keel of which, as it lay on the grass,
				was 74 ells long; in modern measure, it would be a vessel of about 942
				tons burden. Even if we make allowance for the exaggeration or
				ignorance of the writer of the saga, there is still a vast contrast
				between this vessel and the little ship Centurion in which Anson sailed
				round the world.
				</p>
			</details>
			<details id="details-panel2" open="open">
				<summary>Example 2</summary>
				<p>
				It is needless, however, to prove that the Norsemen could have reached
				America in their ships. The voyages from Iceland to Greenland which we
				know they made continually for four hundred years were just as arduous
				as a further voyage from Greenland to the coast of Canada.
				</p>
			</details>
			<details id="details-panel3">
				<summary>Example 3</summary>
				<p>
				The story of the Norsemen runs thus. Towards the end of the ninth
				century, or nearly two hundred years before the Norman conquest, there
				was a great exodus or outswarming of the Norsemen from their original
				home in Norway. A certain King Harold had succeeded in making himself
				supreme in Norway, and great numbers of the lesser chiefs or jarls
				preferred to seek new homes across the seas rather than submit to his
				rule. So they embarked with their seafaring followers—Vikings, as we
				still call them—often, indeed, with their wives and families, in great
				open ships, and sailed away, some to the coast of England, others to
				France, and others even to the Mediterranean, where they took service
				under the Byzantine emperors. But still others, loving the cold rough
				seas of the north, struck westward across the North Sea and beyond the
				coasts of Scotland till they reached Iceland. This was in the year 874.
				Here they made a settlement that presently grew to a population of
				fifty thousand people, having flocks and herds, solid houses of stone,
				and a fine trade in fish and oil with the countries of Northern Europe.
				These settlers in Iceland attained to a high standard of civilization.
				They had many books, and were fond of tales and stories, as are all
				these northern peoples who spend long winter evenings round the
				fireside. Some of the sagas, or stories, which they told were true
				accounts of the voyages and adventures of their forefathers; others
				were fanciful stories, like our modern romances, created by the
				imagination; others, again, were a mixture of the two. Thus it is
				sometimes hard to distinguish fact and fancy in these early tales of
				the Norsemen. We have, however, means of testing the stories. Among the
				books written in Iceland there was one called the 'National Name-Book,'
				in which all the names of the people were written down, with an account
				of their forefathers and of any notable things which they had done.
				</p>
			</details>
		</div>
	</div>

	<p class="mrgn-tp-md"><a href="#details-panel3" class="wb-tabs-ext">Show the third panel</a></p>

	<details class="mrgn-bttm-md">
		<summary>View code</summary>
		<pre><code>&lt;div class=&quot;wb-tabs&quot;&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;details id=&quot;details-panel1&quot;&gt;
			&lt;summary&gt;Example 1&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
		&lt;details id=&quot;details-panel2&quot; open=&quot;open&quot;&gt;
			&lt;summary&gt;Example 2&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
		...
	&lt;/div&gt;

	&lt;p class="mrgn-tp-md"&gt;&lt;a href="#details-panel3" class="wb-tabs-ext"&gt;Show the third panel&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;</code></pre>
	</details>

	<h2>Example 2</h2>
	<p>With ignore-session class.  This will prevent the last selected tab from being remembered at a subsequent page load. (With class or <code>data-wb-tabs</code> attribute.)</p>
	<div class="wb-tabs ignore-session">
		<div class="tabpanels">
			<details id="details-panel10">
				<summary>Example 1</summary>
				<p>
				From time immemorial the Norsemen <a href="#details-panel30">Example 3</a> were among the most daring and
				skilful mariners ever known. They built great wooden boats with tall,
				sweeping bows and sterns. These ships, though open and without decks,
				were yet stout and seaworthy. Their remains have been found, at times
				lying deeply buried under the sand and preserved almost intact. One
				such vessel, discovered on the shore of Denmark, measured 72 feet in
				length. Another Viking ship, which was dug up in Norway, and which is
				preserved in the museum at Christiania, was 78 feet long and 17 feet
				wide. One of the old Norse sagas, or stories, tells how King Olaf
				Tryggvesson built a ship, the keel of which, as it lay on the grass,
				was 74 ells long; in modern measure, it would be a vessel of about 942
				tons burden. Even if we make allowance for the exaggeration or
				ignorance of the writer of the saga, there is still a vast contrast
				between this vessel and the little ship Centurion in which Anson sailed
				round the world.
				</p>
			</details>
			<details id="details-panel20">
				<summary>Example 2</summary>
				<p>
				It is needless, however, to prove that the Norsemen could have reached
				America in their ships. The voyages from Iceland to Greenland which we
				know they made continually for four hundred years were just as arduous
				as a further voyage from Greenland to the coast of Canada.
				</p>
			</details>
			<details id="details-panel30">
				<summary>Example 3</summary>
				<p>
				The story of the Norsemen runs thus. Towards the end of the ninth
				century, or nearly two hundred years before the Norman conquest, there
				was a great exodus or outswarming of the Norsemen from their original
				home in Norway. A certain King Harold had succeeded in making himself
				supreme in Norway, and great numbers of the lesser chiefs or jarls
				preferred to seek new homes across the seas rather than submit to his
				rule. So they embarked with their seafaring followers—Vikings, as we
				still call them—often, indeed, with their wives and families, in great
				open ships, and sailed away, some to the coast of England, others to
				France, and others even to the Mediterranean, where they took service
				under the Byzantine emperors. But still others, loving the cold rough
				seas of the north, struck westward across the North Sea and beyond the
				coasts of Scotland till they reached Iceland. This was in the year 874.
				Here they made a settlement that presently grew to a population of
				fifty thousand people, having flocks and herds, solid houses of stone,
				and a fine trade in fish and oil with the countries of Northern Europe.
				These settlers in Iceland attained to a high standard of civilization.
				They had many books, and were fond of tales and stories, as are all
				these northern peoples who spend long winter evenings round the
				fireside. Some of the sagas, or stories, which they told were true
				accounts of the voyages and adventures of their forefathers; others
				were fanciful stories, like our modern romances, created by the
				imagination; others, again, were a mixture of the two. Thus it is
				sometimes hard to distinguish fact and fancy in these early tales of
				the Norsemen. We have, however, means of testing the stories. Among the
				books written in Iceland there was one called the 'National Name-Book,'
				in which all the names of the people were written down, with an account
				of their forefathers and of any notable things which they had done.
				</p>
			</details>
		</div>
	</div>
	<details class="mrgn-bttm-md">
		<summary>View code</summary>
		<pre><code>&lt;div class=&quot;wb-tabs ignore-session&quot;&gt;
	&lt;div class=&quot;tabpanels&quot;&gt;
		&lt;details id=&quot;details-panel10&quot;&gt;
			&lt;summary&gt;Example 1&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
		&lt;details id=&quot;details-panel20&quot;&gt;
			&lt;summary&gt;Example 2&lt;/summary&gt;
			&lt;p&gt;
				...
			&lt;/p&gt;
		&lt;/details&gt;
		...
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
	</details>
</section>
