david-s
1/10/2019 - 5:00 PM

FAQs Functionality

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));