/*
	Author: Sol
	Filename: togglingContainer.js
	Description: On mobile view the section is a dropdown and will be a normal section on desktop view
	Dependencies:
		- jQuery
	How to use:
		- All the element should be in the parent container (toggling-container)
		- Add (toggling-container__toggler) class to the triggering button.
		- Contain the elements you want to toggle with this element (toggling-container__contents)
	Example :
		<div class="toggling-container">
			<div class="toggling-container__header">				
				<h6>TItle</h6>
				<span class="toggling-container__toggler"></span>
			</div>
			<div class="toggling-container__contents">
				========= Contents to hide on mobile =========
			</div>
		</div>
*/

;(function($) {
  "use strict"

  B2C.togglingContainer = {
    init: function(option) {
      this._default = {
        target: ".toggling-container",
        toggler: ".toggling-container__toggler",
        close: ".toggling-container__close",
        activeClass: "is-active"
      }

      B2C.togglingContainer._option = $.extend(this._default, option)

      if (!$(B2C.togglingContainer._option.target).length) return

      this.eventListener()
    },

    eventListener: function() {
      let self = B2C.togglingContainer
      $(this._option.toggler).on("click", self.toggleContents)
      $(this._option.close).on("click", self.closeContents)
    },

    // Toggle the active class for action
    toggleContents: function() {
      let self = B2C.togglingContainer

      $(B2C.togglingContainer._option.toggler)
        .not(this)
        .closest(".toggling-container.active")
        .removeClass("active")

      $(this)
        .closest(self._option.target)
        .toggleClass(self._option.activeClass)
    },

    // Close Button
    closeContents: function() {
      let self = B2C.togglingContainer
      $(this)
        .closest(self._option.target)
        .removeClass(self._option.activeClass)
    }
  }
  B2C.togglingContainer.init()
})(jQuery)
