<section class="efl-learner-profile__section expired-courses" data-behavior="efl-learner-profile-courses">
<div class="efl-learner-profile__section--header">
<h3 class="expired-courses">Expired Courses</h3>
</div>
<div class="accordion efl-learner-profile-courses" data-behaviour="accordion">
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="expired-courses-0" aria-expanded="false" aria-controls="expired-courses-0-panel">
<div class="efl-learner-profile__section__qualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src="/assets/example-content/efl-qualification-red.svg" alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">EXPIRED feb 2022</div>
<h5>Introduction to Coaching Football</h5>
</div>
</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="expired-courses-0-panel" role="region" aria-labelledby="expired-courses-0">
<div class="accordion__panel--aligncontent" aria-hidden="true">
<p>
You failed to complete this course within a given timeframe. You must repurchase this course in order to complete it.
</p>
<ul class="efl-learner-profile-courses__links">
<li><a class="external-link" target="_blank">Repurchase course</a></li>
<li><a class="external-link" target="_blank">Remove from list</a></li>
</ul>
</div>
</div>
</div>
</div>
<button class="cta cta--secondary show-more-courses" aria-label="show more courses">Show More</button>
<button class="cta cta--secondary show-less-courses" aria-label="show less courses">Show Less</button>
</section>
No notes defined.
{
"modifier": "expired-courses",
"heading": "Expired Courses",
"courses": [
{
"title": "Introduction to Coaching Football",
"date": "EXPIRED feb 2022",
"image": "/assets/example-content/efl-qualification-red.svg",
"copy": "You failed to complete this course within a given timeframe. You must repurchase this course in order to complete it.",
"links": [
{
"link": "Repurchase course"
},
{
"link": "Remove from list"
}
]
}
],
"show-more-button": {
"href": "#",
"copy": "Show More",
"additionalClass": "show-more-courses"
},
"show-less-button": {
"href": "#",
"copy": "Show Less",
"additionalClass": "show-less-courses"
}
}
export default parentElement => {
const activeCourses = parentElement.querySelector('.active-courses');
const completedCourses = parentElement.querySelector('.completed-courses');
const expiredCourses = parentElement.querySelector('.expired-courses');
const noactiveCourses = parentElement.querySelector('.no-active-courses');
const myLearningTab = document.querySelector('[data-page="my-learning"]');
const membershipSignpost = document.querySelector('.membership-signpost');
const showMoreCourses = (container, threshold) => {
const showMoreButton = container.querySelector('.show-more-courses');
const showLessButton = container.querySelector('.show-less-courses');
const qualifications = container.querySelectorAll('.accordion__content');
if (showLessButton) {
showLessButton.classList.add('hidden');
}
if (qualifications.length > threshold) {
qualifications.forEach((qualificiation, index) => {
if (index + 1 > threshold) {
qualificiation.classList.add('hidden');
}
});
showMoreButton.addEventListener('click', e => {
e.preventDefault();
showMoreButton.classList.add('hidden');
showLessButton.classList.remove('hidden');
qualifications.forEach(qualificiation => {
qualificiation.classList.remove('hidden');
});
});
showLessButton.addEventListener('click', e => {
e.preventDefault();
showMoreButton.classList.remove('hidden');
showLessButton.classList.add('hidden');
showMoreCourses(parentElement, 3);
});
} else {
showMoreButton.classList.add('hidden');
showLessButton.classList.add('hidden');
}
};
showMoreCourses(parentElement, 3);
// to hide signpost for my learnings in profile page
if (myLearningTab && membershipSignpost) {
if (activeCourses || completedCourses || expiredCourses) {
membershipSignpost.classList.add('hidden');
} else if (noactiveCourses) {
membershipSignpost.classList.remove('hidden');
}
}
};
.efl-learner-profile-courses {
.accordion__trigger {
background-color: $grey-light;
padding: 0;
padding-right: 2.4rem;
align-items: flex-start;
}
.accordion__panel {
background-color: $grey-light;
&--aligncontent {
&::before {
content: '';
border-top: 1px solid $white;
width: 100%;
max-width: 58rem;
margin-left: 0.8rem;
display: flex;
}
}
}
.efl-category-title {
color: $color-interface-light;
}
.efl-learner-profile__section__qualification {
pointer-events: none;
padding-right: 0;
width: 100%;
}
.efl-learner-profile__section__qualification--badge::after {
display: none;
}
.accordion__trigger-icon {
background-image: url('./assets/images/profile-icons/accordion-arrow.svg');
width: 2.4rem;
height: 2.4rem;
max-width: unset;
margin-top: 1.2rem;
background-size: contain;
}
.accordion__trigger[aria-expanded='true'] > .accordion__trigger-icon {
background-image: url('./assets/images/profile-icons/accordion-arrow.svg');
transform: rotate(180deg);
}
.accordion__content p {
margin-top: 1.3rem;
font-weight: 700;
letter-spacing: 0.02rem;
padding-left: 0.8rem;
}
&__links {
margin: 0;
padding: 0 0.8rem !important;
li {
list-style: none;
margin-bottom: 1.2rem;
a {
color: $blue-accent !important;
border-bottom: none !important;
&.external-link::before {
content: '';
background: url('./assets/images/profile-icons/link-new-page.svg');
width: 1.4rem;
height: 1.6rem;
margin-right: 0.8rem;
}
}
}
}
.accordion__panel a:not(.cta) {
@extend .efl-p-medium;
font-weight: 700;
display: flex;
align-items: center;
text-decoration: underline;
}
.cta {
&.show-more-courses,
&.show-less-courses {
min-width: 100%;
color: $blue;
text-decoration: none;
border-color: $light-blue;
&:hover {
border: none;
color: $blue;
background-color: $light-blue;
}
}
}
@media screen and (min-width: $mq-medium) {
.accordion__trigger-icon {
width: 3.2rem;
height: 3.2rem;
margin-top: 1.6rem;
}
.accordion__panel a:not(.cta) {
font-size: 2rem;
}
}
}
<section class="efl-learner-profile__section {{modifier}}" {{#unless no-active-courses}} data-behavior="efl-learner-profile-courses" {{/unless}}>
{{#unless no-active-courses}}
<div class="efl-learner-profile__section--header">
<h3 class="{{modifier}}">{{heading}}</h3>
</div>
<div class="accordion efl-learner-profile-courses" data-behaviour="accordion">
{{#each courses}}
<div class="accordion__content">
<h3>
<button class="accordion__trigger" id="{{../modifier}}-{{@index}}" aria-expanded="false"
aria-controls="{{../modifier}}-{{@index}}-panel">
<div class="efl-learner-profile__section__qualification">
<div class="efl-learner-profile__section__qualification--badge">
<img src="{{image}}" alt="">
</div>
<div class="efl-learner-profile__section__qualification__content">
<div class="efl-category-title">{{date}}</div>
<h5>{{title}}</h5>
</div>
</div>
<span class="accordion__trigger-icon fill-arrow"></span>
</button>
</h3>
<div class="accordion__panel" id="{{../modifier}}-{{@index}}-panel" role="region" aria-labelledby="{{../modifier}}-{{@index}}">
<div class="accordion__panel--aligncontent" aria-hidden="true">
{{#if copy}}
<p>
{{copy}}
</p>
{{/if}}
<ul class="efl-learner-profile-courses__links">
{{#each links}}
<li><a class="external-link" target="_blank">{{link}}</a></li>
{{/each}}
</ul>
</div>
</div>
</div>
{{/each}}
</div>
<button class="cta cta--secondary show-more-courses" aria-label="show more courses">Show More</button>
<button class="cta cta--secondary show-less-courses" aria-label="show less courses">Show Less</button>
{{/unless}}
{{#if no-active-courses}}
<div class="efl-learner-profile__section--header">
<h3 class="{{modifier}}">{{heading}}</h3>
</div>
<div class="efl-learner-profile__section--nocourse-copy">
Lorem ipsum dolor sit amet,Praesent varius leo i consectetur adipiscing elit.
</div>
{{render '@cta' find-course merge='true'}}
{{/if}}
</section>