<div class="faqblock enablevue">
<div class="faqblock-container row">
<div class="faqblock-header col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="heading-level-3 faqblock-title">Title one</h2>
</div>
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
Hur anmäler jag mig?
</h4>
<div slot="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</accordion>
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
Vad är lägsta antagingspoäng till Mittuniversitets utbildningar?
</h4>
<div slot="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</accordion>
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
Kan jag konkurrenskomplettera när jag söker till Mittuniversitetet?
</h4>
<div slot="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</accordion>
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
Hur anmäler jag mig?
</h4>
<div slot="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</accordion>
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
Hur anmäler jag mig?
</h4>
<div slot="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</accordion>
</div>
<div class="faqblock-container row">
<div class="faqblock-header col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="heading-level-3 faqblock-title">Title two</h2>
</div>
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
2 Hur anmäler jag mig?
</h4>
<div slot="body">
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</accordion>
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
2 Vad är lägsta antagingspoäng till Mittuniversitets utbildningar?
</h4>
<div slot="body">
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</accordion>
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
2 Kan jag konkurrenskomplettera när jag söker till Mittuniversitetet?
</h4>
<div slot="body">
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</accordion>
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
2 Hur anmäler jag mig?
</h4>
<div slot="body">
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</accordion>
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
2 Hur anmäler jag mig?
</h4>
<div slot="body">
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</accordion>
</div>
</div>
{{#if title}}
<div class="row mb-xs">
<div class="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="heading-level-3 mb-0">{{{title}}}</h2>
</div>
</div>
{{/if}}
<div class="faqblock enablevue">
{{#each faqs}}
<div class="faqblock-container row">
<div class="faqblock-header col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<h2 class="heading-level-3 faqblock-title">{{{title}}}</h2>
</div>
{{#each items}}
<accordion v-cloak>
<h4 class="heading-level-4 mr-auto" slot="header">
{{{title}}}
</h4>
<div slot="body">
{{{text}}}
</div>
</accordion>
{{/each}}
</div>
{{/each}}
</div>
{
"epiDivClass": "col-md-12",
"faqs": [
{
"title": "Title one",
"items": [
{
"id": "1",
"title": "Hur anmäler jag mig?",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "2",
"title": "Vad är lägsta antagingspoäng till Mittuniversitets utbildningar?",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "3",
"title": "Kan jag konkurrenskomplettera när jag söker till Mittuniversitetet?",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "4",
"title": "Hur anmäler jag mig?",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "5",
"title": "Hur anmäler jag mig?",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
]
},
{
"title": "Title two",
"items": [
{
"id": "6",
"title": "2 Hur anmäler jag mig?",
"text": "2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "7",
"title": "2 Vad är lägsta antagingspoäng till Mittuniversitets utbildningar?",
"text": "2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "8",
"title": "2 Kan jag konkurrenskomplettera när jag söker till Mittuniversitetet?",
"text": "2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "9",
"title": "2 Hur anmäler jag mig?",
"text": "2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
},
{
"id": "10",
"title": "2 Hur anmäler jag mig?",
"text": "2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}
]
}
]
}
Vue.component("accordion", {
data() {
return {
show: false,
computedHeight: 0,
turn: 0.5
};
},
methods: {
toggle() {
this.show = !this.show;
},
turnArrow() {
return { transform: "rotate(" + this.turn + "turn)" };
},
enter(el, done) {
var opacity = 1;
const interval = setInterval(() => {
if (opacity >= 1) {
clearInterval(interval);
done();
}
el.style.opacity = opacity;
el.style.filter = "alpha(opacity=" + opacity * 100 + ")";
opacity += opacity * 0.1;
}, 10);
},
leave(el, done) {
var opacity = 0;
var interval = setInterval(() => {
if (opacity <= 0.1) {
clearInterval(interval);
el.style.display = "none";
done();
}
el.style.opacity = opacity;
element.style.filter = "alpha(opacity=" + opacity * 100 + ")";
opacity -= opacity * 0.1;
}, 10);
}
},
template: `
<div class="miun--accordion">
<div>
<div class="c-pointer" :class="[this.show ? 'is--active' : '']" @click="toggle">
<div class="miun--accordrion--wrapper col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<div class="miun-content">
<div class="miun--header d-flex flex-row align-items-center" >
<slot name="header">
</slot>
<button class="button-close d-flex align-items-center" >
<i class="material-icons rotate"
:style="[this.show ? { 'transform' : 'rotate(180deg)' } : {}]">expand_more</i>
</button>
</div>
</div>
</div>
<div class="miun--body" @click.stop key="1" v-show="this.show">
<div class="miun--body--wrapper col-md-10 offset-md-1 col-lg-8 offset-lg-2">
<p>
<slot name="body">
</slot>
</p>
</div>
</div>
</div>
</div>
</div>
`
});
.col-md-6{
.faqblock-header{
flex: 0 0 100% !important;
max-width: 100% !important;
margin: 0;
padding: 0;
}
.faqblock{
flex: 0 0 100% !important;
max-width: 100% !important;
margin: 0;
padding: 0;
}
.miun--accordion{
.row.c-pointer{
&.is--active{
.miun--accordrion--wrapper{
background: white !important;
}
}
}
.miun--body--wrapper{
flex: 0 0 100% !important;
max-width: 100% !important;
margin: 0;
padding: $xs-space;
}
.miun--accordrion--wrapper {
flex: 0 0 100% !important;
max-width: 100% !important;
margin: 0;
padding: 0;
}
}
}
.faqblock {
[v-cloak] {
display: none;
}
.faqblock-title{
margin-bottom: 20px;
}
.faqblock-container{
margin-bottom: 50px;
&:last-child{
margin-bottom: 0px;
}
}
.c-pointer{
cursor: pointer;
}
@include media-breakpoint-down(sm) {
padding-left: 0px;
padding-right: 0px;
}
.miun--accordion {
width: 100%;
border-top: 1px solid #eee;
.is--active{
background: $bg-grey;
.miun--body{
border-top: 1px solid $bg-grey;
}
}
.miun-content {
.miun--header {
padding-top: 24px;
padding-bottom: 24px;
h4{
font-family: "Lato Bold";
font-size: 18px;
line-height: 22px;
margin-bottom: 0px;
@include media-breakpoint-down(sm) {
font-size: 16px;
line-height: 20px;
}
}
cursor: pointer;
.button-close {
cursor: pointer;
background: transparent;
padding: 0px;
}
}
}
.miun--body {
width: 100%;
border-top: 1px solid #eee;
background: $bg-grey;
padding: $xs-space 0 $xs-space 0;
cursor: auto;
}
.rotate {
transform: rotate(0deg);
transition: all 0.3s ease;
font-size: 32px;
line-height: 32px;
height: 13px;
width: 32px;
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
height: auto;
}
}
.miun--accordion:last-child {
border-bottom: 1px solid #eee;
}
}
There are no notes for this item.