<div data-behavior="tabs">
<div role="tablist" aria-label="Sample Tabs" class="tab-list tab-section-container">
<a href="#first" role="tab" aria-selected="false" aria-controls="first" id="tab-first">
First Tab
</a>
<a href="#second" role="tab" aria-selected="true" aria-controls="second" id="tab-second">
Second Tab
</a>
<a href="#third" role="tab" aria-selected="false" aria-controls="third" id="tab-third">
Third Tab
</a>
</div>
<div id="first" role="tabpanel" aria-labelledby="tab-first">
<a class="large-signpost-video " data-behavior="video-lightbox" data-video-id="M7lc1UVf-VE" data-poster-image="" tabindex="0">
<img class="large-signpost-video__img" src="/assets/example-content/large-signpost-video.png" alt="">
<div class="large-signpost-video--gradient"></div>
<div class="large-signpost-video__overlay ">
<h3 class="large-signpost-video__title" tabindex="0">
Day 03:
training with the lions
at st georges park
</h3>
<div class="large-signpost-video__datetimewrapper">
<div class="large-signpost-video__datetimewrapper--time">
<i class="clock"></i>
3:32 <span> video</span>
</div>
<div class="large-signpost-video__datetimewrapper--date">
11 Oct 2020
</div>
</div>
</div>
</a>
</div>
<div id="second" role="tabpanel" tabindex="0" aria-labelledby="tab-second">
<div id="" class="player-profile-list" role="region" aria-label="Goalkeepers">
<h2 class="player-profile-list__title">
Goalkeepers <span class="player-profile-list__title2"></span>
</h2>
<div class="player-profile-list__players">
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-2.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile-3.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">Tammy
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
<div class="player-profile">
<div class="player-profile__img-wrapper">
<img src="/assets/example-content/player-profile.png" alt="" />
<div class="player-profile__stats">
<div class="stats">
<p class="text-xs ">Senior caps</p>
<p class="value">6</p>
</div>
<div class="stats">
<p class="text-xs ">Senior goals</p>
<p class="value">1</p>
</div>
<div class="info">
<p class="text-xs ">Legacy No.</p>
<p class="value">1028</p>
</div>
</div>
</div>
<a href='http://www.google.com' class="player-name">test
<div>
<span class="player-name__lastname">Alexander</span>
</div>
</a>
</div>
</div>
</div>
<div class="form-guide container">
<div class="form-guide__bg-overlay">
<div class="container__content">
<img class="form-guide__results-logo" src="/assets/images/england_crest.png" alt="" />
<p class="text-s vertical-spacing-s">Last 5 matches</p>
<ul class="form-results">
<li data-behaviour="tooltip">
<p class="form form--win" tabindex="0" role="button" aria-label="win">w</p>
<div class="form-results__tooltip" data-ref="tooltip">
<div class="form-results__match-date">WED 16 DEC 2020</div>
<div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
<div class="match-result">
<div class="match-result__team">
<img src="/assets/example-content/germany-flag.png" alt="" />
<span>GER</span>
</div>
<div>
<div class="match-result__score">2 - 3</div>
<span>HT: 8-8</span>
</div>
<div class="match-result__team">
<img src="/assets/example-content/england-flag.png" alt="" />
<span>ENG</span>
</div>
</div>
<div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
<a href="/" class="cta cta--primary ">
<p>Post-match report</p>
</a>
</div>
</li>
<li data-behaviour="tooltip">
<p class="form form--loss" tabindex="0" role="button" aria-label="loss">l</p>
<div class="form-results__tooltip" data-ref="tooltip">
<div class="form-results__match-date">WED 16 DEC 2020</div>
<div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
<div class="match-result">
<div class="match-result__team">
<img src="/assets/example-content/germany-flag.png" alt="" />
<span>GER</span>
</div>
<div>
<div class="match-result__score">2 - 3</div>
<span>HT: 8-8</span>
</div>
<div class="match-result__team">
<img src="/assets/example-content/england-flag.png" alt="" />
<span>ENG</span>
</div>
</div>
<div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
<a href="/" class="cta cta--primary ">
<p>Post-match report</p>
</a>
</div>
</li>
<li data-behaviour="tooltip">
<p class="form form--win" tabindex="0" role="button" aria-label="win">w</p>
<div class="form-results__tooltip" data-ref="tooltip">
<div class="form-results__match-date">WED 16 DEC 2020</div>
<div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
<div class="match-result">
<div class="match-result__team">
<img src="/assets/example-content/germany-flag.png" alt="" />
<span>GER</span>
</div>
<div>
<div class="match-result__score">2 - 3</div>
<span>HT: 8-8</span>
</div>
<div class="match-result__team">
<img src="/assets/example-content/england-flag.png" alt="" />
<span>ENG</span>
</div>
</div>
<div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
<a href="/" class="cta cta--primary ">
<p>Post-match report</p>
</a>
</div>
</li>
<li data-behaviour="tooltip">
<p class="form form--draw" tabindex="0" role="button" aria-label="draw">d</p>
<div class="form-results__tooltip" data-ref="tooltip">
<div class="form-results__match-date">WED 16 DEC 2020</div>
<div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
<div class="match-result">
<div class="match-result__team">
<img src="/assets/example-content/germany-flag.png" alt="" />
<span>GER</span>
</div>
<div>
<div class="match-result__score">2 - 3</div>
<span>HT: 8-8</span>
</div>
<div class="match-result__team">
<img src="/assets/example-content/england-flag.png" alt="" />
<span>ENG</span>
</div>
</div>
<div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
<a href="/" class="cta cta--primary ">
<p>Post-match report</p>
</a>
</div>
</li>
<li data-behaviour="tooltip">
<p class="form form--draw" tabindex="0" role="button" aria-label="draw">d</p>
<div class="form-results__tooltip" data-ref="tooltip">
<div class="form-results__match-date">WED 16 DEC 2020</div>
<div class="form-results__league">NATIONS LEAGUE GROUP STAGE</div>
<div class="match-result">
<div class="match-result__team">
<img src="/assets/example-content/germany-flag.png" alt="" />
<span>GER</span>
</div>
<div>
<div class="match-result__score">2 - 3</div>
<span>HT: 8-8</span>
</div>
<div class="match-result__team">
<img src="/assets/example-content/england-flag.png" alt="" />
<span>ENG</span>
</div>
</div>
<div class="form-results__match-location">WEMBLEY STADIUM, ENGLAND</div>
<a href="/" class="cta cta--primary ">
<p>Post-match report</p>
</a>
</div>
</li>
</ul>
<p class="text-xs vertical-spacing-m">Rollover for match information</p>
</div>
</div>
</div>
</div>
<div id="third" role="tabpanel" tabindex="0" aria-labelledby="tab-third">
<div class="advertising-mpu">
<a href="#">
<picture>
<source media="(max-width: 819px)" srcset="/assets/example-content/advertising-300.png">
<source media="(min-width: 820px)" srcset=" /assets/example-content/advertising-780.png">
<img src="/assets/example-content/advertising-300.png" alt="">
</picture>
</a>
</div>
</div>
</div>
No notes defined.
{
"tab1": {
"title": "First Tab",
"id": "first",
"active-tab": false
},
"tab2": {
"title": "Second Tab",
"id": "second",
"active-tab": true
},
"tab3": {
"title": "Third Tab",
"id": "third",
"active-tab": false
}
}
// JS File Created For Tab Enhancement We didn't add any script on tab.js
// we created new file for tab enhancement ticket
import carouselGlide from '../carousel/carousel-glide';
import carousel from '../carousel/carousel';
import carouselImageGallery from '../carousel/carousel-image-gallery';
import largeSignpostCarousel from '../large-signpost-carousel/large-signpost-carousel';
import englandMerchandiseCarousel from '../../modules/england-merchandise-carousel/england-merchandise-carousel';
import fixtureResultList from '../../modules/fixtures-results-carousel/fixtures-results-carousel';
export default () => {
const selectEachTabs = document.querySelectorAll('.tab-section-container a');
// When click tab it will pass an ID into the URL
selectEachTabs.forEach(selectEachTab => {
selectEachTab.addEventListener('click', e => {
// Created to pass id into the URL
const tabSelectedList = [];
const activeTabs = document.querySelectorAll(
'.tab-section-container a[aria-selected=true]'
);
activeTabs.forEach(tab => {
if (
e.target.getAttribute['aria-controls'] !==
tab.getAttribute('aria-controls')
) {
tabSelectedList.push(tab.getAttribute('aria-controls'));
}
});
const alltabIds = tabSelectedList.join();
const queryStr = `tab=${alltabIds}`;
const redirectUrl = `${window.location.origin}${
window.location.pathname
}`;
window.history.pushState({}, '', `${redirectUrl}?${queryStr}`);
// initialize or Refreshing default carousel on clicking tabs starts here
// If you are creating new component with glider carousel using different data behaviour
// you need to initialize that component inside this file
const carouselElements = document.querySelectorAll(
'[data-behavior="carousel"]'
);
if (carouselElements) {
carouselElements.forEach(carouselElement => {
const loadlist = carousel({
carouselElement,
});
loadlist.refresh();
});
}
const carouselGlideObjects = document.querySelectorAll(
'[data-behavior="carousel-glide"]'
);
if (carouselGlideObjects) {
const removeCloneCards = document.querySelectorAll(
'.glide__slide--clone'
);
removeCloneCards.forEach(cards => {
cards.remove();
});
carouselGlideObjects.forEach(carouselGlideElement => {
let loadcarouselglide = carouselGlide({ carouselGlideElement });
loadcarouselglide.destroy();
loadcarouselglide = carouselGlide({ carouselGlideElement });
});
const removeClonePagination = document.querySelectorAll(
'.carousel-nav-wrapper'
);
removeClonePagination.forEach(dots => {
const paginationRemove = dots.querySelectorAll(
'.glide-carousel__pagination'
);
if (paginationRemove) {
const paginationone = paginationRemove[1];
const paginationtwo = paginationRemove[2];
if (paginationone) {
paginationone.remove();
}
if (paginationone) {
paginationtwo.remove();
}
}
});
}
const imageGalleryObject = document.querySelectorAll(
'[data-behavior="carousel-image-gallery"]'
);
if (imageGalleryObject) {
imageGalleryObject.forEach(imageGalleryElement => {
let loadgallery = carouselImageGallery({
imageGalleryElement,
});
loadgallery.destroy();
loadgallery = carouselImageGallery({
imageGalleryElement,
});
});
}
const largeSignpostCarouselElements = document.querySelectorAll(
'[data-behavior="large-signpost-carousel"]'
);
if (largeSignpostCarouselElements) {
largeSignpostCarouselElements.forEach(largeSignpostCarouselElement => {
let loadsignpost = largeSignpostCarousel({
largeSignpostCarouselElement,
});
loadsignpost.destroy();
loadsignpost = largeSignpostCarousel({
largeSignpostCarouselElement,
});
});
}
const tabbedCarousels = document.querySelectorAll(
'.tabbed-carousel__tab-list a[aria-selected="true"]'
);
tabbedCarousels.forEach(tab => {
tab.click();
});
const englandmerchandiseElements = document.querySelectorAll(
'[data-behavior="england-merchandise-carousel"]'
);
if (englandmerchandiseElements) {
englandmerchandiseElements.forEach(englandmerchandiseElement => {
const loadcarousel = englandMerchandiseCarousel({
englandmerchandiseElement,
});
loadcarousel.refresh();
});
}
const fixtureResultElements = document.querySelectorAll(
'[data-behavior="fixture-result-list"]'
);
if (fixtureResultElements) {
fixtureResultElements.forEach(fixtureResultElement => {
const loadfixture = fixtureResultList({
fixtureResultElement,
});
loadfixture.refresh();
});
}
// initialize or Refreshing default carousel on clicking tabs ends here
});
});
// To get tab id from url for tab content remains same after page reloading
function getUrlParameters(parameter, staticURL, decode) {
const currLocation = staticURL.length ? staticURL : window.location.search;
if (!currLocation) {
return null;
}
const parArr = currLocation.split('?')[1].split('&');
const returnBool = true;
for (let i = 0; i < parArr.length; i++) {
const parr = parArr[i].split('=');
if (parr[0] === parameter) {
return decode ? decodeURIComponent(parr[1]) : parr[1];
}
}
if (!returnBool) {
return false;
}
return null;
}
const getURLIds = getUrlParameters('tab', '');
if (!getURLIds) {
return;
}
const totaltabs = getURLIds.split(',');
window.addEventListener('DOMContentLoaded', () => {
totaltabs.forEach(totaltab => {
document.querySelector(`[aria-controls=${totaltab}]`).click();
});
});
};
.tab-list {
// We can change these vars inside individual components
// If, for example, we need white tabs on top of a dark background
--tab-color-hover: var(--brand-primary-hover);
--tab-color-primary: var(--brand-primary);
--tab-color-secondary: #fff;
--tab-color-secondary-hover: var(--brand-quaternary);
position: relative;
display: inline-flex;
vertical-align: middle;
align-content: space-evenly;
width: 100%;
@media screen and (max-width: $mq-small) {
width: 100%;
margin-bottom: 0.8rem;
flex-shrink: 0;
}
& > [role='tab'] {
@include text-xs;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--tab-color-primary);
text-decoration: none;
position: relative;
flex: 1 1 auto;
display: block;
padding: 19px $spacing-m;
border-radius: 4px;
border: 1px solid;
// min-width: 13.9rem;
text-align: center;
text-transform: uppercase;
margin: 2px;
white-space: no-wrap;
transition: 0.2s all ease-out;
@media screen and (min-width: $mq-medium) {
font-size: 1.4rem;
}
&:hover {
background-color: var(--tab-color-hover);
border-color: var(--brand-primary);
color: var(--tab-color-secondary-hover) !important;
}
@media screen and (max-width: $mq-small) {
width: 9rem;
padding: 15px $spacing-m;
}
}
// Prevent double borders
& > [role='tab']:not(:first-child) {
margin-left: -3px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
// Reset rounded corners
& > [role='tab']:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
& > [aria-selected='true'] {
background-color: var(--tab-color-primary);
border-color: var(--tab-color-primary);
color: var(--tab-color-secondary) !important;
text-decoration: none !important;
}
}
:root [data-brand='womens'] {
.tab-list {
& > [role='tab'] {
&:hover {
color: #fff;
}
}
}
}
.tab-section-container {
padding: 2rem 1.5rem 2rem 1.5rem;
@media screen and (min-width: $mq-medium) {
padding: 5.2rem 12.5rem 5.2rem 12.5rem;
}
}
<div data-behavior="tabs">
<div role="tablist" aria-label="Sample Tabs" class="tab-list tab-section-container">
<a href="#{{tab1.id}}" role="tab" aria-selected="{{tab1.active-tab}}" aria-controls="{{tab1.id}}"
id="tab-{{tab1.id}}">
{{tab1.title}}
</a>
<a href="#{{tab2.id}}" role="tab" aria-selected="{{tab2.active-tab}}" aria-controls="{{tab2.id}}"
id="tab-{{tab2.id}}">
{{tab2.title}}
</a>
{{#if tab3}}
<a href="#{{tab3.id}}" role="tab" aria-selected="{{tab3.active-tab}}" aria-controls="{{tab3.id}}"
id="tab-{{tab3.id}}">
{{tab3.title}}
</a>
{{/if}}
</div>
<div id="{{tab1.id}}" role="tabpanel" aria-labelledby="tab-{{tab1.id}}">
{{render '@large-signpost-video'}}
</div>
<div id="{{tab2.id}}" role="tabpanel" tabindex="0" aria-labelledby="tab-{{tab2.id}}">
{{render '@player-profile-list'}}
{{render '@form-guide'}}
</div>
{{#if tab3}}
<div id="{{tab3.id}}" role="tabpanel" tabindex="0" aria-labelledby="tab-{{tab3.id}}">
{{render '@advertising-mpu'}}
</div>
{{/if}}
</div>