<section class="article-jump-to" data-behaviour="article-jump-to">
<h6 class="efl-heading-6">JUMP TO SECTION</h6>
</section>
No notes defined.
{
"sections": [
{
"name": "Gareth Southgate",
"description": "Gareth Southgate tells Peter Glynn that he wants young english players to have the freedom to express themselves",
"anchor": "#",
"hideClass": "hidden"
},
{
"name": "Session setup",
"description": "Pressing is when pressure is applied on the player or the team that’s in possession.It’s a skill that’s used in",
"anchor": "#"
},
{
"name": "Running the Session",
"description": "So, what can it look like? Well, pressing can be when:a primary-age player simply shows desire and enthusi",
"anchor": "#"
},
{
"name": "Example",
"description": "Here are three ideas you can use to help your players develop their pressing skills.",
"anchor": "#"
}
]
}
export default parentElement => {
const contentArea = document.querySelector('main');
const pageTitles = contentArea.querySelectorAll('h1, h2, h3');
let count = 0;
pageTitles.forEach((item, index) => {
const link = document.createElement('a');
let desc = '';
if (item.nextElementSibling) {
desc = item.nextElementSibling.innerText;
} else {
desc = '';
}
const jumptoLink = item.querySelector('.jumpTohide');
if (jumptoLink) {
link.classList.add('hidden');
}
link.removeAttribute('id');
if (
!jumptoLink &&
count < 5 &&
item.innerText.trim() !== '' &&
!item.closest('.efl-search-mechanic')
) {
link.setAttribute('href', `#jump-to-section-link-${index + 1}`);
link.innerHTML = `<h5>${item.innerText}</h5><p>${desc}</p>`;
link.setAttribute('aria-label', `Jump to ${item.innerText}`);
parentElement.appendChild(link);
if (document.querySelector(`#jump-to-section-link-${index + 1}`)) {
document
.querySelector(`#jump-to-section-link-${index + 1}`)
.removeAttribute('id');
}
item.setAttribute('id', `jump-to-section-link-${index + 1}`);
// eslint-disable-next-line no-plusplus
count++;
}
});
};
.article-jump-to {
@include rte;
color: $blue;
&__hyphen {
color: $red;
padding-right: 0.8rem;
}
.efl-heading-6 {
font-family: $text-font-ef;
letter-spacing: 0.14em;
font-weight: 700;
font-size: 1.6rem;
line-height: 2rem;
@media screen and (min-width: $mq-medium) {
font-size: 2rem;
line-height: 1.6rem;
}
}
h6 {
padding-bottom: 1.6rem;
border-bottom: 1px solid #eceef3;
}
/* stylelint-disable no-duplicate-selectors */
h4 {
color: $blue;
font-family: $text-font-ef;
font-size: 2rem;
font-style: normal;
font-weight: 700;
line-height: 1.6rem;
letter-spacing: 0.3rem;
text-align: left;
margin-bottom: 0;
}
h4::after {
display: block;
content: '';
width: 100%;
border-bottom: 1px solid #eceef3;
margin-top: 1.6rem;
margin-bottom: 0.8rem;
}
h4::before {
display: block;
content: '';
width: 100%;
border-bottom: 1px solid #eceef3;
margin-bottom: 1.6rem;
}
h5 {
display: flex;
color: $blue;
font-family: $text-font-ef;
font-size: 2rem;
font-style: normal;
font-weight: 400;
line-height: 3.2rem;
letter-spacing: 0;
text-align: left;
margin-bottom: 0;
@include text-limit(1);
}
h5::before {
content: '';
width: 1rem;
height: 1.3rem;
color: $red;
border-bottom: 1px solid $red;
display: inline-block;
align-items: center;
justify-content: center;
margin-right: 0.8rem;
margin-bottom: 0.4rem;
}
/* stylelint-disable no-descending-specificity */
p {
font-family: $text-font-ef;
color: $color-interface-light;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 2rem;
letter-spacing: 0.02em;
text-align: left;
position: relative;
@include text-limit(2);
}
a {
display: flex;
flex-direction: column;
padding: 0.8rem 0;
color: unset;
text-decoration: none;
border-bottom: 1px solid #eceef3;
&:hover {
h5 {
color: $crest-blue;
text-decoration: underline;
}
p {
color: $crest-blue;
text-decoration: underline;
}
}
}
}
<section class="article-jump-to" data-behaviour="article-jump-to">
<h6 class="efl-heading-6">JUMP TO SECTION</h6>
</section>