<div class="accordion" data-behaviour="accordion">
<p class="accordion__category">registration</p>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="question-1.1" aria-expanded="false" aria-controls="question-1.1-panel">
question-1.1 : Where can I get more information about safeguarding in football?
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="question-1.1-panel" role="region" aria-labelledby="question-1.1">
<div class="accordion__panel--aligncontent">
<div class="rte-content rte-content--normal">
<p>Safeguarding is important to us and we taken the following steps to ensure it: We will always communicate with you, not your child, if you choose to sign up for marketing emails – your email address is our only point of contact. We will never share your personal information outside The FA unless you give us permission to do so. We will never use location tracking on The FA SuperKicks videos. If you are worried about your child and need to report a concern these experts can help: (CEOP) Child Exploitation and Online Protection command - <a href='#'>https: //ceop.police.uk/safety-centre/ NSPCC</a> - <a href='#'>https: //www.nspcc.org.uk/<a /> Childline - <a href='#'>https: //www.childline.org.uk/</a> You can also contact The FA directly via - <a href='#'>safeguarding@thefa.com</a> or call 0800 0835 902</p>
</div>
</div>
</div>
</div>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="question-1.2" aria-expanded="false" aria-controls="question-1.2-panel">
question-1.2 : Where can I get more information about safeguarding in football?
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="question-1.2-panel" role="region" aria-labelledby="question-1.2">
<div class="accordion__panel--aligncontent">
<div class="rte-content rte-content--normal">
<p>Safeguarding is important to us and we taken the following steps to ensure it: We will always communicate with you, not your child, if you choose to sign up for marketing emails – your email address is our only point of contact. We will never share your personal information outside The FA unless you give us permission to do so. We will never use location tracking on The FA SuperKicks videos. If you are worried about your child and need to report a concern these experts can help: (CEOP) Child Exploitation and Online Protection command - <a href='#'>https: //ceop.police.uk/safety-centre/ NSPCC</a> - <a href='#'>https: //www.nspcc.org.uk/<a /> Childline - <a href='#'>https: //www.childline.org.uk/</a> You can also contact The FA directly via - <a href='#'>safeguarding@thefa.com</a> or call 0800 0835 902</p>
</div>
<div class="left-aligned">
<a href="/" class="cta cta--primary ">
<p>Primary CTA</p>
</a>
</div>
<div class="left-aligned">
<a href="/" class="cta cta--primary ">
<p>Primary CTA</p>
</a>
</div>
<div class="left-aligned">
<a href="/" class="cta cta--primary ">
<p>Primary CTA</p>
</a>
</div>
</div>
</div>
</div>
<p class="accordion__category">HOW IT WORKS</p>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="question-2.1" aria-expanded="false" aria-controls="question-2.1-panel">
question-2.1 : Where can I get more information about safeguarding in football?
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="question-2.1-panel" role="region" aria-labelledby="question-2.1">
<div class="accordion__panel--aligncontent">
<div class="rte-content rte-content--normal">
<p>Safeguarding is important to us and we taken the following steps to ensure it: We will always communicate with you, not your child, if you choose to sign up for marketing emails – your email address is our only point of contact. We will never share your personal information outside The FA unless you give us permission to do so. We will never use location tracking on The FA SuperKicks videos. If you are worried about your child and need to report a concern these experts can help: (CEOP) Child Exploitation and Online Protection command - <a href='#'>https: //ceop.police.uk/safety-centre/ NSPCC</a> - <a href='#'>https: //www.nspcc.org.uk/<a /> Childline - <a href='#'>https: //www.childline.org.uk/</a> You can also contact The FA directly via - <a href='#'>safeguarding@thefa.com</a> or call 0800 0835 902</p>
</div>
<section class="efl-large-video-player efl-blue" data-behavior="efl-large-video-player">
<div class="efl-large-video-player__inner">
<div class="efl-large-video-player__content">
<h2>Example</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et ut labore et ut labore et dolorgna aliqua.</p>
<a href="#">Hyperlink text to access the next page</a>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
<li>Lorem ipsum dolor sit amet, consectetur</li>
</ul>
<p><em>Lorem ipsum dolor sit amet, consectetur</em></p>
</div>
<div class="efl-large-video-player__video-wrap" data-video-type="youtube" data-video-id="ufLSGCZEPrg">
<div class="efl-large-video-player__video-poster">
<img src="/assets/example-content/video-error-poster.jpg" alt="error-video" loading="lazy" />
</div>
<div class="efl-large-video-player__video-thumbnail">
<button tabindex="0" aria-label="Example play in youtube video player">
<img src="/assets/example-content/womens-hero.png" alt="" loading="lazy" />
</button>
</div>
<div id="efl-large-video-player" class="efl-large-video-player__player"></div>
</div>
</div>
</section>
</div>
</div>
</div>
<p class="accordion__category">Online/Offline usability - connectivity</p>
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="question-3.1" aria-expanded="false" aria-controls="question-3.1-panel">
question-3.1 : Where can I get more information about safeguarding in football?
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="question-3.1-panel" role="region" aria-labelledby="question-3.1">
<div class="accordion__panel--aligncontent">
<div class="rte-content rte-content--normal">
<p>Safeguarding is important to us and we taken the following steps to ensure it: We will always communicate with you, not your child, if you choose to sign up for marketing emails – your email address is our only point of contact. We will never share your personal information outside The FA unless you give us permission to do so. We will never use location tracking on The FA SuperKicks videos. If you are worried about your child and need to report a concern these experts can help: (CEOP) Child Exploitation and Online Protection command - <a href='#'>https: //ceop.police.uk/safety-centre/ NSPCC</a> - <a href='#'>https: //www.nspcc.org.uk/<a /> Childline - <a href='#'>https: //www.childline.org.uk/</a> You can also contact The FA directly via - <a href='#'>safeguarding@thefa.com</a> or call 0800 0835 902</p>
</div>
</div>
</div>
</div>
</div>
No notes defined.
{
"data": [
{
"category": "registration",
"questions": [
{
"id": "question-1.1",
"question": "question-1.1 : Where can I get more information about safeguarding in football?",
"answer": {
"content": [
{
"text": "Safeguarding is important to us and we taken the following steps to ensure it: We will always communicate with you, not your child, if you choose to sign up for marketing emails – your email address is our only point of contact. We will never share your personal information outside The FA unless you give us permission to do so. We will never use location tracking on The FA SuperKicks videos. If you are worried about your child and need to report a concern these experts can help: (CEOP) Child Exploitation and Online Protection command - <a href='#'>https: //ceop.police.uk/safety-centre/ NSPCC</a> - <a href='#'>https: //www.nspcc.org.uk/<a/> Childline - <a href='#'>https: //www.childline.org.uk/</a> You can also contact The FA directly via - <a href='#'>safeguarding@thefa.com</a> or call 0800 0835 902"
}
]
}
},
{
"id": "question-1.2",
"question": "question-1.2 : Where can I get more information about safeguarding in football?",
"answer": {
"withCtas": true,
"ctas": {},
"content": [
{
"text": "Safeguarding is important to us and we taken the following steps to ensure it: We will always communicate with you, not your child, if you choose to sign up for marketing emails – your email address is our only point of contact. We will never share your personal information outside The FA unless you give us permission to do so. We will never use location tracking on The FA SuperKicks videos. If you are worried about your child and need to report a concern these experts can help: (CEOP) Child Exploitation and Online Protection command - <a href='#'>https: //ceop.police.uk/safety-centre/ NSPCC</a> - <a href='#'>https: //www.nspcc.org.uk/<a/> Childline - <a href='#'>https: //www.childline.org.uk/</a> You can also contact The FA directly via - <a href='#'>safeguarding@thefa.com</a> or call 0800 0835 902"
}
]
}
}
]
},
{
"category": "HOW IT WORKS",
"questions": [
{
"id": "question-2.1",
"question": "question-2.1 : Where can I get more information about safeguarding in football?",
"answer": {
"withLargeVideoPlayer": true,
"content": [
{
"text": "Safeguarding is important to us and we taken the following steps to ensure it: We will always communicate with you, not your child, if you choose to sign up for marketing emails – your email address is our only point of contact. We will never share your personal information outside The FA unless you give us permission to do so. We will never use location tracking on The FA SuperKicks videos. If you are worried about your child and need to report a concern these experts can help: (CEOP) Child Exploitation and Online Protection command - <a href='#'>https: //ceop.police.uk/safety-centre/ NSPCC</a> - <a href='#'>https: //www.nspcc.org.uk/<a/> Childline - <a href='#'>https: //www.childline.org.uk/</a> You can also contact The FA directly via - <a href='#'>safeguarding@thefa.com</a> or call 0800 0835 902"
}
]
}
}
]
},
{
"category": "Online/Offline usability - connectivity",
"questions": [
{
"id": "question-3.1",
"question": "question-3.1 : Where can I get more information about safeguarding in football?",
"answer": {
"content": [
{
"text": "Safeguarding is important to us and we taken the following steps to ensure it: We will always communicate with you, not your child, if you choose to sign up for marketing emails – your email address is our only point of contact. We will never share your personal information outside The FA unless you give us permission to do so. We will never use location tracking on The FA SuperKicks videos. If you are worried about your child and need to report a concern these experts can help: (CEOP) Child Exploitation and Online Protection command - <a href='#'>https: //ceop.police.uk/safety-centre/ NSPCC</a> - <a href='#'>https: //www.nspcc.org.uk/<a/> Childline - <a href='#'>https: //www.childline.org.uk/</a> You can also contact The FA directly via - <a href='#'>safeguarding@thefa.com</a> or call 0800 0835 902"
}
]
}
}
]
}
]
}
.accordion {
&__category {
@include text-l;
font-family: var(--brand-text--font-family);
letter-spacing: -0.01em;
text-transform: uppercase;
color: $blue;
margin: 5.4rem 0 0.4rem 0;
&:first-of-type {
margin-top: 0;
}
}
&__content {
border-radius: 0.4rem;
margin-bottom: 1.2rem;
background: $grey-light;
}
&__trigger {
@include text-m;
font-family: var(--brand-text--font-family);
font-weight: 500;
line-height: 2rem;
padding: 1.2rem;
display: flex;
color: $blue;
width: 100%;
background: $grey-light;
border-radius: 0.4rem;
border: none;
justify-content: space-between;
cursor: pointer;
text-align: left;
&:hover {
color: var(--brand-primary);
}
&-icon {
content: '';
height: 1.9rem;
max-width: 1.9rem;
width: 100%;
transition: 0.4s;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
position: relative;
margin-top: 0.6rem;
margin-left: 1.8rem;
background: url('./assets/example-content/FAQdown_arrow.svg') no-repeat
center;
&::after {
content: '';
color: $blue;
transform: rotate(270deg);
position: absolute;
}
}
&[aria-expanded='true'] {
color: var(--brand-primary);
> .accordion__trigger-icon {
background: url('./assets/example-content/FAQup_arrow.svg') no-repeat
center;
background-size: contain;
&::after {
color: $white;
transform: rotate(90deg);
}
}
}
}
&__trigger-separator {
background: $blue;
opacity: 0.1;
height: 0.1rem;
display: block;
}
&__panel {
@include text-s;
max-height: 0;
transition: max-height 0.5s ease-out;
overflow: hidden;
overflow-y: scroll;
box-sizing: border-box;
font-family: var(--brand-text--font-family);
line-height: 3rem;
background: $grey-light;
a:not(.cta) {
text-decoration: none;
color: var(--brand-primary);
// Note - opacity (0.3 to be applied) can't be applied to border, we need color code.
border-bottom: 0.2rem solid var(--brand-primary);
}
// 3 col layout for buttons within accordion panel.
.left-aligned {
@media screen and (min-width: $mq-small) {
margin-top: 1.8rem;
display: inline-block;
width: 33%;
.cta {
margin-left: 0;
margin-right: 0;
}
}
}
&--aligncontent {
padding: 0 1.2rem 1.6rem 1.2rem;
}
.rte-content {
color: $color-interface-light;
font-size: 1.4rem;
line-height: 2rem;
}
&.open-accordion {
max-height: 80rem;
transition: max-height 0.5s ease-in;
}
}
&__panel::-webkit-scrollbar {
width: 0.2rem;
}
&__panel::-webkit-scrollbar-track {
background: $grey-light;
-webkit-border-radius: 1rem;
border-radius: 1rem;
}
}
/* stylelint-disable no-descending-specificity */
[data-brand='mens'] {
.accordion {
&__trigger {
color: $crest-blue;
&[aria-expanded='true'] {
color: var(--brand-primary);
> .accordion__trigger-icon {
background: url('./assets/example-content/FAQup_bluearrow.svg')
no-repeat center;
background-size: contain;
}
}
}
&__panel {
.rte-content {
color: $blue;
}
}
}
}
[data-brand='womens'] {
.accordion {
&__trigger {
color: $crest-blue;
&[aria-expanded='true'] {
color: var(--brand-primary);
> .accordion__trigger-icon {
background: url('./assets/example-content/FAQup_redarrow.svg')
no-repeat center;
background-size: contain;
}
}
}
&__panel {
.rte-content {
color: $blue;
}
}
}
}
<div class="accordion" data-behaviour="accordion">
{{#each data}}
<p class="accordion__category">{{category}}</p>
{{#each questions}}
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="{{id}}" aria-expanded="false" aria-controls="{{id}}-panel">
{{question}}
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="{{id}}-panel" role="region" aria-labelledby="{{id}}">
<div class="accordion__panel--aligncontent">
{{render '@rte' answer merge="true"}}
{{#if answer.withLargeVideoPlayer}}
{{render "@efl-large-video-player--default"}}
{{/if}}
{{#if answer.withCtas}}
<div class="left-aligned">
{{render "@cta"}}
</div>
<div class="left-aligned">
{{render "@cta"}}
</div>
<div class="left-aligned">
{{render "@cta"}}
</div>
{{/if}}
</div>
</div>
</div>
{{/each}}
{{/each}}
</div>