Adds an active class to the answer and the open/close SVG
(function(MISK, $, undefined) {
'use strict';
/**
* FAQ functionality
* @param {faqElement} faqElement - The FAQ
* @param {status} status - Active FAQ status
* @function
*/
function Faqs(faqElement) {
const faqAnswer = faqElement.querySelector('.js-faq-answer');
const faqIcon = faqElement.querySelector('.js-faq-svg');
const activeClass = 'faqs__q-a-answer--active';
const activeIconClass = 'faqs__q-a-svg--active';
let isActive = false;
/**
* Open the FAQ
*/
function open() {
isActive = true;
faqAnswer.classList.add(activeClass);
faqIcon.classList.add(activeIconClass);
}
/**
* Close the FAQ
*/
function close() {
isActive = false;
faqAnswer.classList.remove(activeClass);
faqIcon.classList.remove(activeIconClass);
}
/**
* Toggle the FAQ
* @param {event} event - Prevents default action of click event
* @function
*/
function toggle(event) {
event.preventDefault();
if (isActive) {
close();
} else {
open();
}
}
faqElement.addEventListener('click', toggle);
}
/**
* @memberOf MISK
* @namespace MISK.faqs
*/
MISK.faqs = {
initialisedFaqs: [],
init: function() {
const faqElements = document.querySelectorAll('.js-faqs-item');
for (let i = 0; i < faqElements.length; i++) {
const faqElement = faqElements[i];
MISK.faqs.initialisedFaqs.push(new Faqs(faqElement));
}
}
};
}(window.MISK = window.MISK || {}, jQuery));