If used more than once on a page, adjust the IDs of the <section>s, the IDs can be anything you like (from a semantic name, to a randomised string) as long as they’re unique, and the href attribute for the corresponding nav tabs__link points to it.
<div class="tabs js-tabs">
<nav class="tabs__nav">
<ul class="tabs__list">
<li class="tabs__item"><a class="tabs__link" href="#section1">First: Section 1</a></li>
<li class="tabs__item"><a class="tabs__link is-selected" href="#section-two">Section Two</a></li>
<li class="tabs__item"><a class="tabs__link" href="#third-section">Third Section</a></li>
<li class="tabs__item"><a class="tabs__link" href="#section4">Fourth and Final</a></li>
<li class="tabs__item"><a class="tabs__link" href="#section5">Just kidding, here's a really long fifth item</a></li>
</ul>
</nav>
<section class="tabs__section" id="section1">
<h2 class="h3">section1</h2>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
<section class="tabs__section" id="section-two">
<h2 class="h3">section2</h2>
<p class="intro">Expanded by default with a class of <code>is-selected</code> on the link</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
<section class="tabs__section" id="third-section">
<h2 class="h3">section3</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
</section>
<section class="tabs__section" id="section4">
<h2 class="h3">section4</h2>
<p>Lipsum has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
<section class="tabs__section" id="section5">
<h2 class="h3">section5</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
</div>
<div class="tabs js-tabs">
<nav class="tabs__nav">
<ul class="tabs__list">
<li class="tabs__item"><a class="tabs__link" href="#section1">First: Section 1</a></li>
<li class="tabs__item"><a class="tabs__link is-selected" href="#section-two">Section Two</a></li>
<li class="tabs__item"><a class="tabs__link" href="#third-section">Third Section</a></li>
<li class="tabs__item"><a class="tabs__link" href="#section4">Fourth and Final</a></li>
<li class="tabs__item"><a class="tabs__link" href="#section5">Just kidding, here's a really long fifth item</a></li>
</ul>
</nav>
<section class="tabs__section" id="section1">
<h2 class="h3">section1</h2>
<p>{{ lorem }}</p>
</section>
<section class="tabs__section" id="section-two">
<h2 class="h3">section2</h2>
<p class="intro">Expanded by default with a class of <code>is-selected</code> on the link</p>
<p>{{ loremLong }}</p>
</section>
<section class="tabs__section" id="third-section">
<h2 class="h3">section3</h2>
<p>{{ loremShort }}</p>
</section>
<section class="tabs__section" id="section4">
<h2 class="h3">section4</h2>
<p>{{ lorem }}</p>
</section>
<section class="tabs__section" id="section5">
<h2 class="h3">section5</h2>
<p>{{ loremLong }}</p>
</section>
</div>
.tabs {
$tabs-inline-breakpoint: 65rem;
margin-bottom: $spacing-xl;
border-bottom: $spacing-2xs solid $neutral--primary;
padding-bottom: $spacing-sm;
&__nav {
margin: 0 -1px 0 0;
border-bottom: 3px solid $neutral--primary;
text-align: center;
@media (min-width: $tabs-inline-breakpoint) {
overflow: hidden;
overflow-x: auto;
}
}
&__list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: flex-end;
@media (min-width: $tabs-inline-breakpoint) {
flex-wrap: nowrap;
margin: 0;
justify-content: flex-start;
}
}
&__item {
display: flex;
align-content: center;
justify-content: center;
margin: 0 $spacing-2xs $spacing-xs;
@media (min-width: $tabs-inline-breakpoint) {
margin: 0 1px 0 0;
}
}
&__link {
display: inline-block;
font-weight: 500;
border-radius: 1em;
padding: 0.2em 1em;
background: $greyblue--light;
&:hover {
color: $neutral--primary;
}
@media (min-width: $tabs-inline-breakpoint) {
padding: 0.5em 1em;
display: flex;
justify-content: center;
align-items: center;
min-width: 8em;
border-radius: 0.2em 0.2em 0 0;
}
@media (min-width: $tabs-inline-breakpoint + 10rem) {
padding: 0.75em 2em;
}
&.is-selected {
background: $neutral--primary;
color: white;
}
}
&__section {
padding-top: $spacing-4xl;
}
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<p>If used more than once on a page, adjust the IDs of the <section>s, the IDs can be anything you like (from a semantic name, to a randomised string) as long as they’re unique, and the href attribute for the corresponding nav tabs__link points to it.</p>
</body>
</html>
/* global jQuery */
(function ($) {
// @TODO: at some point, it'd probably be nice if tabsInit() sat here
// and was imported rather than being in app.js
})(jQuery);