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
(line 2) 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
(line 2)
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">
<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.
Test
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?
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.
Test 1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?
Test 2
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?
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>
Example 3
With a large number of tabs, managed by a horizontal scroll bar
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.
Test
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?
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.
Test 1
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?
Test 2
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus, sapiente. Repellendus vitae odio fugiat commodi?
Example 4
In today’s rapidly shifting landscape, resilience and foresight have become essential traits for success. Teams that cultivate open communication and embrace diverse perspectives are better equipped to navigate uncertainty. Progress isn’t always linear—it often requires recalibration, reflection, and a willingness to challenge the status quo. The most impactful organizations are those that prioritize purpose alongside performance, recognizing that long-term value stems from meaningful engagement and ethical decision-making. As technology accelerates and global challenges intensify, our ability to adapt, collaborate, and innovate will define the future. Growth is not just about expansion; it’s about evolution, and the courage to lead with intention.
Example 5
Success in any field is rarely the result of chance—it’s built on intention, consistency, and a clear sense of purpose. Teams that align around shared values and long-term goals tend to outperform those focused solely on short-term gains. When individuals feel empowered to contribute meaningfully, creativity flourishes and collaboration deepens. The most effective leaders understand that progress is a collective effort, shaped by trust, transparency, and a willingness to listen.
Example 6
Innovation doesn’t always arrive with fanfare. Sometimes, it begins quietly—in a conversation, a sketch, or a moment of curiosity. The most transformative ideas often emerge from asking simple questions and daring to explore unconventional answers. In today’s fast-paced world, the ability to pause, reflect, and reimagine is more valuable than ever. It’s not just about keeping up; it’s about looking ahead with purpose. Whether you're building a product, shaping a policy, or leading a team, clarity of vision and adaptability are essential. Progress isn’t measured only by speed, but by the depth of impact and the integrity of the journey. When we prioritize thoughtful action over reactive motion, we create space for meaningful change. And in that space, real progress begins.
Example 7
Great ideas often start small. A passing thought, a quick sketch, or a casual conversation can spark something bigger. What matters is the willingness to explore, refine, and act. Progress isn’t always fast or flashy—it’s built through steady effort and thoughtful decisions. Whether you're launching a new initiative or improving an existing one, staying curious and open to change makes all the difference. In the end, it’s not about perfection. It’s about momentum and purpose.
Example 8
Momentum is built through small, consistent actions. It’s not always about making big moves, but about showing up, staying focused, and refining your approach over time. The most effective teams understand that progress is a process, not a moment. They value clarity, communication, and the ability to pivot when needed. Whether you're launching a new initiative or improving an existing one, success often comes from the quiet work behind the scenes. With patience and purpose, even the smallest steps can lead to meaningful outcomes.
Example 9
Every challenge presents a chance to grow. Whether it’s a tight deadline, a complex problem, or an unexpected shift in direction, how we respond defines the outcome. The most effective teams don’t just react—they reflect, recalibrate, and move forward with purpose. Progress isn’t about avoiding obstacles; it’s about learning to navigate them with resilience and creativity. When people feel supported and empowered, they rise to meet the moment. And in those moments, real transformation begins—not just in the work, but in the people behind it.
Example 10
Not every solution needs to be complex. Sometimes, the most effective answers come from simplifying the problem and focusing on what truly matters. Clear goals, open communication, and a willingness to iterate can turn even the most daunting tasks into manageable steps. When teams trust each other and stay aligned, progress becomes not just possible, but sustainable. It’s not about doing everything at once—it’s about doing the right things, one step at a time.
Example 11
Ideas gain momentum when they’re shared. A single insight can spark a conversation, shift a perspective, or inspire a new direction. The most impactful work often begins with a question: What if we tried something different? When teams embrace curiosity and stay open to feedback, they create space for innovation to flourish. It’s not about having all the answers—it’s about being willing to explore them together. In that shared pursuit, creativity becomes a collective force.
Example 12
True progress often begins with a shift in mindset. It’s not always about doing more, but about doing what matters most. When we take the time to focus, prioritize, and align our actions with our values, we create work that resonates. Distractions are everywhere, but clarity cuts through the noise. Whether you're building something new or refining what already exists, intention is everything. The best outcomes aren’t rushed—they’re shaped by patience, purpose, and a willingness to grow through the process.
Example 13
Every team has its rhythm. Some move fast, others take a more deliberate pace. What matters most is alignment—knowing where you're headed and why. When people understand the purpose behind their work, motivation becomes intrinsic. It’s not just about hitting targets; it’s about creating something that lasts. The best results come from collaboration, trust, and a shared commitment to excellence. In that space, creativity thrives, and even the most ambitious goals start to feel within reach.
Example 14
Every goal begins with a decision to start. It doesn’t require perfection, just momentum. The first draft, the first meeting, the first step—they all matter more than waiting for the “right” moment. Progress is built through action, reflection, and refinement. When teams commit to moving forward together, even small efforts compound into meaningful results. It’s not about having everything figured out—it’s about showing up, staying curious, and trusting the process to lead somewhere worthwhile.
View code
<div class="wb-tabs">
<div class="tabpanels">
<details id="details-panel100">
<summary>Example 1</summary>
<p>
...
</p>
</details>
<details id="details-panel200">
<summary>Example 2</summary>
<p>
...
</p>
</details>
...
<details id="details-panel1400">
<summary>Example 14</summary>
<p>
...
</p>
</details>
</div>
</div>
Page details
- Date modified: