<div class="tabs tabs--with-anchors" role="tablist">
<div class="
horizontal-scroller
" data-show-scroll-icon="">
<div class="horizontal-scroller__scroller">
<div class="tabs__navigation">
<button class="tabs__button" aria-controls="panel-lorem-ipsum-dolor-sit-amet" aria-expanded="true" role="tab">
Lorem ipsum dolor sit amet
</button>
<button class="tabs__button" aria-controls="panel-vivamus" aria-expanded="false" role="tab">
Vivamus
</button>
<button class="tabs__button" aria-controls="panel-in-placerat" aria-expanded="false" role="tab">
In placerat
</button>
<button class="tabs__button" aria-controls="panel-in-sagittis" aria-expanded="false" role="tab">
In sagittis
</button>
</div>
</div>
</div>
<div class="tabs__content">
<div role="tabpanel" class="tabs__content-item" id="panel-lorem-ipsum-dolor-sit-amet" aria-hidden="false" aria-labelledby="tab-lorem-ipsum-dolor-sit-amet">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum mattis arcu at sollicitudin. Aenean quis ante bibendum, suscipit enim et, pharetra arcu. Proin eleifend laoreet est, eu fermentum leo porttitor non. Donec id ex mauris. Nam elementum tellus ante, quis tincidunt tortor volutpat ut. Etiam ut nibh eget est semper lacinia. Sed non justo eu leo dignissim consectetur pulvinar sed arcu. Etiam at metus vel turpis mattis commodo ac eu ligula. Etiam convallis mauris sem, a gravida ex finibus eu. Etiam eu pulvinar lorem, eu dictum orci. Aliquam eros sapien, commodo non nulla sed, venenatis rhoncus tortor. Aenean non ipsum id mauris fermentum rutrum. Vestibulum aliquam at eros condimentum euismod. Etiam ut lorem euismod, porttitor dui ac, maximus metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
</div>
<div role="tabpanel" class="tabs__content-item" id="panel-vivamus" aria-hidden="true" aria-labelledby="tab-vivamus">
<p>Vivamus a erat risus. Suspendisse vel tortor a tortor vestibulum lacinia non blandit massa. Suspendisse potenti. Etiam odio quam, cursus feugiat pretium eu, sollicitudin ac ex. Sed imperdiet lorem leo, id elementum orci egestas in. Donec nec vestibulum augue, at feugiat metus. In mollis dictum ex, quis aliquam felis finibus ac. Donec ac varius risus. Fusce iaculis felis dolor, nec elementum ex blandit sit amet. Sed imperdiet nisl eu pharetra venenatis. In vitae malesuada quam, ac lobortis lorem. Aenean commodo dui sit amet lectus scelerisque vehicula. Ut libero mauris, porttitor sit amet metus sed, accumsan pulvinar nunc. Nulla consequat fringilla ipsum sit amet fringilla. Ut facilisis arcu in enim congue tristique.</p>
</div>
<div role="tabpanel" class="tabs__content-item" id="panel-in-placerat" aria-hidden="true" aria-labelledby="tab-in-placerat">
<p>In placerat, felis id scelerisque porttitor, risus turpis sagittis mauris, quis tincidunt lectus erat vel lorem. Aenean tincidunt ligula a justo ultricies eleifend. Vestibulum odio velit, aliquet sit amet sapien id, posuere porttitor est. Proin commodo mattis placerat. Fusce dictum diam nec augue bibendum sagittis. Suspendisse elementum lectus congue egestas tempus. Cras auctor nulla lacus, quis ullamcorper dui laoreet nec. Phasellus ac congue velit, sit amet venenatis est. Cras consequat vitae nisi nec blandit. Vestibulum ut nisl consequat, tempor turpis vel, cursus velit. Etiam sed pretium leo. Ut orci mi, dictum vitae nisi id, sagittis ornare libero. Suspendisse vel auctor sapien. Aliquam ullamcorper placerat elit.</p>
</div>
<div role="tabpanel" class="tabs__content-item" id="panel-in-sagittis" aria-hidden="true" aria-labelledby="tab-in-sagittis">
<p>In sagittis lacinia pulvinar. Nullam scelerisque tellus vitae urna finibus aliquam. Morbi tempor ut lectus quis lobortis. Nulla congue nisi in sapien lacinia, elementum commodo elit dapibus. Curabitur quis risus ornare, sodales enim id, sollicitudin augue. Aliquam dictum urna est, at volutpat lorem pulvinar ut. Mauris mollis vel elit ac hendrerit. Vestibulum dui ligula, consectetur nec maximus eget, finibus eget tortor. Mauris congue magna nec sapien bibendum pulvinar.</p>
</div>
</div>
</div>
<div class="tabs {{ additionalClasses }} {{getmodifiers modifiers "tabs"}}" role="tablist">
{{#> @horizontal-scroller}}
<div class="tabs__navigation">
{{#each items}}
<button class="tabs__button" aria-controls="panel-{{ id }}" aria-expanded="{{active}}" role="tab">
{{ title }}
{{#if ../boxed}}{{> @icon id='chevron-down' additionalClasses="tabs__icon"}}{{/if}}
</button>
{{/each}}
</div>
{{/@horizontal-scroller}}
<div class="tabs__content">
{{#>@partial-block}}
{{#each items }}
<div role="tabpanel" class="tabs__content-item" id="panel-{{ id }}" aria-hidden="{{#if active }}false{{else}}true{{/if}}" aria-labelledby="tab-{{ id }}">
{{#if childcomponent }}
{{render (getcomponent childcomponent)}}
{{else}}
{{{ body }}}
{{/if}}
</div>
{{/each}}
{{/@partial-block}}
</div>
</div>
{
"items": [
{
"title": "Lorem ipsum dolor sit amet",
"id": "lorem-ipsum-dolor-sit-amet",
"active": true,
"body": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris fermentum mattis arcu at sollicitudin. Aenean quis ante bibendum, suscipit enim et, pharetra arcu. Proin eleifend laoreet est, eu fermentum leo porttitor non. Donec id ex mauris. Nam elementum tellus ante, quis tincidunt tortor volutpat ut. Etiam ut nibh eget est semper lacinia. Sed non justo eu leo dignissim consectetur pulvinar sed arcu. Etiam at metus vel turpis mattis commodo ac eu ligula. Etiam convallis mauris sem, a gravida ex finibus eu. Etiam eu pulvinar lorem, eu dictum orci. Aliquam eros sapien, commodo non nulla sed, venenatis rhoncus tortor. Aenean non ipsum id mauris fermentum rutrum. Vestibulum aliquam at eros condimentum euismod. Etiam ut lorem euismod, porttitor dui ac, maximus metus. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>"
},
{
"title": "Vivamus",
"id": "vivamus",
"active": false,
"body": "<p>Vivamus a erat risus. Suspendisse vel tortor a tortor vestibulum lacinia non blandit massa. Suspendisse potenti. Etiam odio quam, cursus feugiat pretium eu, sollicitudin ac ex. Sed imperdiet lorem leo, id elementum orci egestas in. Donec nec vestibulum augue, at feugiat metus. In mollis dictum ex, quis aliquam felis finibus ac. Donec ac varius risus. Fusce iaculis felis dolor, nec elementum ex blandit sit amet. Sed imperdiet nisl eu pharetra venenatis. In vitae malesuada quam, ac lobortis lorem. Aenean commodo dui sit amet lectus scelerisque vehicula. Ut libero mauris, porttitor sit amet metus sed, accumsan pulvinar nunc. Nulla consequat fringilla ipsum sit amet fringilla. Ut facilisis arcu in enim congue tristique.</p>"
},
{
"title": "In placerat",
"id": "in-placerat",
"active": false,
"body": "<p>In placerat, felis id scelerisque porttitor, risus turpis sagittis mauris, quis tincidunt lectus erat vel lorem. Aenean tincidunt ligula a justo ultricies eleifend. Vestibulum odio velit, aliquet sit amet sapien id, posuere porttitor est. Proin commodo mattis placerat. Fusce dictum diam nec augue bibendum sagittis. Suspendisse elementum lectus congue egestas tempus. Cras auctor nulla lacus, quis ullamcorper dui laoreet nec. Phasellus ac congue velit, sit amet venenatis est. Cras consequat vitae nisi nec blandit. Vestibulum ut nisl consequat, tempor turpis vel, cursus velit. Etiam sed pretium leo. Ut orci mi, dictum vitae nisi id, sagittis ornare libero. Suspendisse vel auctor sapien. Aliquam ullamcorper placerat elit.</p>"
},
{
"title": "In sagittis",
"id": "in-sagittis",
"active": false,
"body": "<p>In sagittis lacinia pulvinar. Nullam scelerisque tellus vitae urna finibus aliquam. Morbi tempor ut lectus quis lobortis. Nulla congue nisi in sapien lacinia, elementum commodo elit dapibus. Curabitur quis risus ornare, sodales enim id, sollicitudin augue. Aliquam dictum urna est, at volutpat lorem pulvinar ut. Mauris mollis vel elit ac hendrerit. Vestibulum dui ligula, consectetur nec maximus eget, finibus eget tortor. Mauris congue magna nec sapien bibendum pulvinar.</p>"
}
],
"modifiers": "with-anchors"
}
import Tabs from './tabs';
const els = document.querySelectorAll('.tabs');
for (let el of els) {
Tabs(el);
}
import { gsap } from 'gsap';
import isInViewport from '../../functions/isInViewport';
const Tabs = (el) => {
const panels = el.querySelectorAll('.tabs__content-item');
const buttons = el.querySelectorAll('.tabs__button');
const open = (activeId) => {
const activePanel = document.getElementById(activeId);
if (!activePanel && panels[0]) {
open(panels[0].id);
return;
}
const activeButtons = [...buttons].filter((button) => button.getAttribute('aria-controls') === activeId);
let visibleActiveButton = null;
if (el.classList.contains('tabs--with-anchors')) {
history.pushState(null, null, '#' + activeId);
}
for (let button of activeButtons) {
button.setAttribute('aria-expanded', true);
visibleActiveButton = button;
}
activePanel.setAttribute('aria-hidden', false);
el.classList.add('tabs--open');
const dataParams = localStorage.getItem('data-params');
if (dataParams) {
dataParams.substring(1).split('&').map(item => {
const param = item.split('=');
const element = document.getElementById(param[0]);
if (element) {
element.value = param[1];
const event = new Event('change', { bubbles:true });
element.dispatchEvent(event);
}
});
localStorage.removeItem('data-params');
}
if (visibleActiveButton && !isInViewport(activePanel)) {
gsap.to(window, { duration: 0.3, scrollTo: visibleActiveButton });
};
};
const toggle = (activeId) => {
resetTabs();
open(activeId);
};
const resetTabs = () => {
for (let panel of panels) {
panel.setAttribute('aria-hidden', true);
}
for (let button of buttons) {
button.setAttribute('aria-expanded', false);
}
};
const initialiseEvents = () => {
for (let button of buttons) {
button.addEventListener('click', (e) => {
const id = e.currentTarget.getAttribute('aria-controls');
toggle(id);
});
}
};
const changeTabs = () => {
resetTabs();
open(location.hash.replace('#', ''));
};
const init = () => {
initialiseEvents();
if (el.classList.contains('tabs--with-anchors')) {
if (location.hash && document.getElementById(location.hash.replace('#', ''))) {
changeTabs();
}
window.addEventListener('hashchange', (event) => {
const tabId = location.hash.replace('#', '');
if (document.getElementById(tabId)) {
changeTabs();
}
});
}
};
init();
};
export default Tabs;
.tabs {
.horizontal-scroller--overflow-left,
.horizontal-scroller--overflow-right {
margin: size(-2) 0;
padding: size(2) 0;
}
.horizontal-scroller.panel-full-width {
&.horizontal-scroller--overflow-left,
&.horizontal-scroller--overflow-right {
margin: size(-2) size(-4);
@include breakpoint-down($m) {
margin: size(-2);
}
}
}
}
.tabs--centered {
@include breakpoint-classes {
.tabs__navigation {
justify-content: center;
}
}
}
.tabs__navigation {
display: flex;
font-size: $size-16;
.tabs--centered .horizontal-scroller--overflow-left &,
.tabs--centered .horizontal-scroller--overflow-right & {
justify-content: flex-start;
}
}
.tabs__button {
font-size: size(2.5);
line-height: size(3.5);
cursor: pointer;
margin-left: size(6);
margin-bottom: size(0.5);
flex-shrink: 0;
@include breakpoint-down($m) {
margin-left: size(3);
}
&:hover {
box-shadow: 0 size(0.5) 0 $color-black;
}
&[aria-expanded="true"] {
box-shadow: 0 size(0.5) 0 $color-green-dark;
color: $color-green-dark;
@include color-theme {
box-shadow: 0 size(0.5) 0 $arg-theme-color;
color: $arg-theme-color;
}
}
&:first-child {
margin-left: 0;
}
}
.tabs__content-item {
display: none;
padding: size(2) 0;
@include breakpoint($xl) {
padding: size(3) 0;
}
&[aria-hidden="false"] {
display: block;
}
}
.tabs__icon {
fill: $color-gray-5;
position: absolute;
top: 50%;
right: size(2);
width: size(2);
height: size(2);
transform: translateY(-50%);
@include breakpoint($xl) {
right: size(3);
width: size(2.5);
height: size(2.5);
}
.tabs__button[aria-expanded="true"] & {
transform: translateY(-50%) rotate(180deg);
fill: $color-green-dark;
}
}
No notes defined.