<div class='link-list-education-wrap'>
<span class="heading h2">
What are you looking for?
</span>
<div class="link-list-education">
<div class="links-nav column">
<ul class="information-links">
<li class="active">
<a href="#education-panel-0">
<span class="icon fal fa-info-square " aria-hidden="true"></span>Information for
</a>
</li>
<li class="">
<a href="#education-panel-1">
<span class="icon fal fa-graduation-cap " aria-hidden="true"></span>Programmes
</a>
</li>
<li class="">
<a href="#education-panel-2">
<span class="icon fal fa-window " aria-hidden="true"></span>Applications and admission
</a>
</li>
<li class="">
<a href="#education-panel-3">
<span class="icon fal fa-user-graduate " aria-hidden="true"></span>Information for students
</a>
</li>
</ul>
</div>
<div id="scroll-to-panel">
<div class="education-panel education-panel-0 ">
<div class="link-list white">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Information for</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
<div class="education-panel education-panel-1 hidden">
<div class="link-list white">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Programmes</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
<div class="education-panel education-panel-2 hidden">
<div class="link-list white">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Applications and admission</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
<div class="education-panel education-panel-3 hidden">
<div class="link-list white">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Information for students</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='link-list-education-wrap'>
{{render '@heading' heading}}
<div class="link-list-education">
<div class="links-nav column">
<ul class="information-links">
{{#each list-education.items}}
<li class="{{#if active}}active{{/if}}">
<a href="{{href}}">
{{render '@icon' icon merge=true}}{{text}}
</a>
</li>
{{/each}}
</ul>
</div>
<div id="scroll-to-panel">
{{#each list-education.items}}
<div class="education-panel education-panel-{{@index}} {{#unless active}}hidden{{/unless}}">
{{ render '@link-list--link-list-white' list merge=true}}
</div>
{{/each}}
</div>
</div>
</div>
{
"heading": {
"text": "What are you looking for?",
"tag": "span",
"modifier": "h2"
},
"list-education": {
"items": [
{
"text": "Information for",
"href": "#education-panel-0",
"icon": {
"style": "fal",
"icon": "fa-info-square"
},
"active": true,
"list": {
"items": [
{
"text": "Information for",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
}
]
}
},
{
"text": "Programmes",
"href": "#education-panel-1",
"icon": {
"style": "fal",
"icon": "fa-graduation-cap"
},
"list": {
"items": [
{
"text": "Programmes",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
}
]
}
},
{
"text": "Applications and admission",
"href": "#education-panel-2",
"icon": {
"style": "fal",
"icon": "fa-window"
},
"list": {
"items": [
{
"text": "Applications and admission",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
}
]
}
},
{
"text": "Information for students",
"href": "#education-panel-3",
"icon": {
"style": "fal",
"icon": "fa-user-graduate"
},
"list": {
"items": [
{
"text": "Information for students",
"href": "#",
"iconBefore": {
"style": "fas",
"icon": "fa-caret-right"
}
}
]
}
}
]
}
}
.link-list-education-wrap .heading {
@apply mb-6 block;
}
.link-list-education {
@apply grid grid-cols-1 md:grid-cols-2 grid-rows-2 md:grid-rows-none shadow-2xl;
.column:first-child {
@apply bg-red;
}
.education-panel {
@apply h-full;
}
.white {
@apply h-full;
}
.information-links {
@apply text-white p-8 relative;
&:before {
content: '';
@apply w-0 h-0 absolute;
top: -17px;
left: 32px;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 18px solid #e03131;
}
li {
@apply mb-8;
a {
@apply flex text-h4 font-semibold;
&:hover .icon {
transform: translateX(5px);
@apply no-underline;
}
span {
@apply -mt-1;
&:hover {
@apply underline;
}
}
.icon {
@apply pt-2 w-10;
transition: all 0.3s ease;
}
}
}
}
}
class EducationLinks {
constructor($el) {
this.$el = $el;
}
init() {
var self = this;
var $links = $(self.$el).find('.information-links li a');
$links.on('click', function (e) {
e.preventDefault();
var $this = $(this);
var hash = $this.prop('hash');
var selector = hash.replace('#', '.');
$links.parent().removeClass('active');
$links
.filter('[href="' + hash + '"]')
.parent()
.addClass('active');
$(self.$el).find('.education-panel').hide().filter(selector).show();
if ($(window).width() <= 768) {
var tag = $('#scroll-to-panel');
$('html,body').animate(
{ scrollTop: $(tag).offset().top },
'slow'
);
}
});
if ($(window).width() >= 768) {
$links.mouseover(function (e) {
e.preventDefault();
var $this = $(this);
var hash = $this.prop('hash');
var selector = hash.replace('#', '.');
$links.parent().removeClass('active');
$links
.filter('[href="' + hash + '"]')
.parent()
.addClass('active');
$(self.$el).find('.education-panel').hide().filter(selector).show();
});
}
}
}
(function () {
'use strict';
[...document.querySelectorAll('.link-list-education')].forEach(($el) => {
const inst = new EducationLinks($el);
inst.init();
});
})();
No notes defined.