<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" aria-hidden="true">
<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" aria-hidden="true">
<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 " tabindex="0">Primary CTA</a>
</div>
<div class="left-aligned">
<a href="/" class="cta cta--primary " tabindex="0">Primary CTA</a>
</div>
<div class="left-aligned">
<a href="/" class="cta cta--primary " tabindex="0">Primary CTA</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" aria-hidden="true">
<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>
<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" aria-hidden="true">
<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": false,
"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"
}
]
}
}
]
}
]
}
/* stylelint-disable no-descending-specificity */
.accordion {
@include rte;
a.cta--primary {
color: $white;
}
.accordion {
h3 {
margin-bottom: 0 !important;
}
&__category {
@include text-l;
font-family: var(--brand-text--font-family);
letter-spacing: -0.01em;
text-transform: uppercase;
color: $blue;
margin: 4rem 0 0.4rem 0;
&:first-of-type {
margin-top: 0;
}
}
&__content {
border-radius: 0.4rem;
margin-bottom: 1.6rem;
background: rgba(236, 238, 243, 0.4);
h3 {
margin-bottom: 0 !important;
@extend .efl-p-large;
}
p {
@extend .efl-p-medium;
}
}
}
&__trigger {
padding: 1.6rem;
display: flex;
color: $blue;
width: 100%;
background: rgba(236, 238, 243, 0.4);
border-radius: 0.4rem;
border: none;
justify-content: space-between;
align-items: center;
cursor: pointer;
text-align: left;
font-weight: 700;
@extend .efl-p-large;
&: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;
padding-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-in-out;
overflow: hidden;
overflow-y: scroll;
box-sizing: border-box;
font-family: var(--brand-text--font-family);
line-height: 3rem;
background: rgba(236, 238, 243, 0.4);
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.6rem 1.6rem 1.6rem;
}
.rte-content {
color: $color-interface-light;
font-size: 1.4rem;
line-height: 2rem;
}
&.open-accordion {
max-height: 80rem;
transition-delay: 300ms;
}
}
&__panel::-webkit-scrollbar {
width: 0.2rem;
}
&__panel::-webkit-scrollbar-track {
background: rgba(236, 238, 243, 0.4);
-webkit-border-radius: 1rem;
border-radius: 1rem;
}
}
[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}}
{{#if category}}
<p class="accordion__category">{{category}}</p>
{{/if}}
{{#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" aria-hidden="true">
{{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>