Search


Tabbed Interface

Purpose

Dynamically stacks multiple sections of content, transforming them into a tabbed interface.

Example 1

With session storage to remember last tab viewed. (Default behaviour)

Example 1

From time immemorial the Norsemen Example 3 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.

Example 2

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.

Example 3

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.

Show the third panel

View code
<div class="wb-tabs">
	<div class="tabpanels">
		<details id="details-panel1">
			<summary>Example 1</summary>
			<p>
				...
			</p>
		</details>
		<details id="details-panel2" open="open">
			<summary>Example 2</summary>
			<p>
				...
			</p>
		</details>
		...
	</div>

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

Example 2

With ignore-session class. This will prevent the last selected tab from being remembered at a subsequent page load. (With class or data-wb-tabs attribute.)

Example 1

From time immemorial the Norsemen Example 3 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.

Example 2

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.

Example 3

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.

View code
<div class="wb-tabs ignore-session">
	<div class="tabpanels">
		<details id="details-panel10">
			<summary>Example 1</summary>
			<p>
				...
			</p>
		</details>
		<details id="details-panel20">
			<summary>Example 2</summary>
			<p>
				...
			</p>
		</details>
		...
	</div>
</div>

Page details

Date modified: