74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
import { Component, Input } from '@angular/core';
|
|
|
|
@Component({
|
|
moduleId: module.id,
|
|
selector: 'faq-component',
|
|
templateUrl: './faq-component.html',
|
|
})
|
|
export class FaqAccordionComponent {
|
|
@Input() showTitle: boolean = true;
|
|
@Input() queries: any = [
|
|
{
|
|
id: 1,
|
|
question: 'How long is this site live?',
|
|
answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
|
},
|
|
{
|
|
id: 2,
|
|
question: 'How do I create an account?',
|
|
answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
|
},
|
|
{
|
|
id: 3,
|
|
question: 'What protections does Strategic Systems use to protect our data?',
|
|
answer: "For now it is limited to 100MB per instance. We'll offer expansion options soon.",
|
|
},
|
|
{
|
|
id: 4,
|
|
question: 'What type of support is included with this Service?',
|
|
answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
|
},
|
|
{
|
|
id: 5,
|
|
question: 'Do you have premium plans for products?',
|
|
answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
|
},
|
|
{
|
|
id: 6,
|
|
question: 'Who else is using plurk SaaS tool?',
|
|
answer: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
|
|
},
|
|
];
|
|
@Input() type: string = 'faq';
|
|
|
|
index: number = 0;
|
|
ngOnInit() {
|
|
setTimeout(() => {
|
|
const ele = document.querySelectorAll<HTMLElement>('.accordion button');
|
|
if (ele.length) {
|
|
ele[0].click();
|
|
}
|
|
});
|
|
}
|
|
toggleAccordion(event: any, i: number) {
|
|
const isOpen = this.index === i;
|
|
const ele = document.querySelectorAll<HTMLElement>('.accordion-content');
|
|
for (let i = 0; i < ele.length; i++) {
|
|
ele[i].style.maxHeight = '';
|
|
}
|
|
|
|
const element = event.currentTarget;
|
|
element.classList.toggle('active');
|
|
const panel = element.nextElementSibling;
|
|
if (panel) {
|
|
if (isOpen) {
|
|
this.index = 0;
|
|
panel.style.maxHeight = '';
|
|
} else {
|
|
this.index = i;
|
|
panel.style.maxHeight = panel.scrollHeight + 'px';
|
|
}
|
|
}
|
|
}
|
|
}
|