https://tmglobal.com.my/themes/custom/Tm/lib/accordion.js?tljml2

1var swiper_products;
2jQuery(document).ready(function ($) {
3  let productsSwiperValid = document.getElementsByClassName("products-swiper").length > 0;
4
5  if (productsSwiperValid) {
6    let tempContainer = document.getElementsByClassName("products-swiper")[0].parentNode.getElementsByClassName("temp-container")[0];
7    let tempAccoridonImages = tempContainer.getElementsByClassName("custom-accordion-image");
8    let tempAccordionItems = tempContainer.getElementsByClassName("custom-accordion-item");
9    console.log("Test", tempAccordionItems);
10    let productsSwiperItems = [];
11    let count = 0;
12    let limit = 5;
13    while (count < tempAccordionItems.length) {
14      let tempImageArray = [];
15      let tempItemArray = [];
16
17      if (limit > tempAccordionItems.length) {
18        limit = tempAccordionItems.length;
19      }
20
21      while (count < limit) {
22        tempImageArray.push(tempAccoridonImages[count]);
23        tempItemArray.push(tempAccordionItems[count]);
24        count++;
25      }
26
27      productsSwiperItems.push([tempImageArray, tempItemArray]);
28      limit += 5;
29    }
30
31    let productsSwiperContainer = document.getElementsByClassName("products-swiper")[0].getElementsByClassName("swiper-wrapper")[0];
32    let accordionTitle = $(".accordion-title-class").text();
33    productsSwiperItems.forEach((slide) => {
34      let code = '<div class="swiper-slide">' + '<div class="row">' + '<div class="col-md-6">';
35
36      slide[0].forEach((row) => {
37        code += row.outerHTML;
38      });
39      
40      code +=
41        "</div>" +
42        '<div class="col-md-6">' +
43        '<p class="section-title desktop-version">'+accordionTitle+'</p>' +
44        '<div class="custom-accordion">';
45
46      slide[1].forEach((row) => {
47        code += row.outerHTML;
48      });
49
50      code += "</div>" + "</div>" + "</div>" + "</div>";
51      console.log(code);
52      productsSwiperContainer.insertAdjacentHTML("beforeend", code);
53    });
54
55    tempContainer.parentNode.removeChild(tempContainer);
56  }
57
58  setTimeout(() => {
59    if (productsSwiperValid) {
60      swiper_products = new Swiper(".products-swiper", {
61        // Optional parameters
62        direction: "horizontal",
63        autoHeight: true,
64        pagination: {
65          el: ".products-swiper-pagination ",
66          clickable: true,
67          renderBullet: function (index, className) {
68            return '<span class="' + className + '">' + (index + 1) + "</span>";
69          },
70        },
71      });
72    }
73
74    let customAccordions = document.getElementsByClassName("custom-accordion");
75
76    for (let i = 0; i < customAccordions.length; i++) {
77      let accordionTogglers = customAccordions[i].getElementsByClassName("custom-accordion-toggler");
78      let accordionImages = customAccordions[i].parentNode.parentNode.getElementsByClassName("custom-accordion-image");
79
80      for (let j = 0; j < accordionTogglers.length; j++) {
81        accordionTogglers[j].addEventListener("click", (e) => {
82          e.preventDefault();
83          toggleAccordion(e.currentTarget.parentNode, accordionTogglers);
84          if (accordionImages.length > 0) toggleAccordionImage(accordionImages[j], accordionImages);
85        });
86      }
87      
88      if (accordionTogglers.length != 0) {
89        console.log(accordionTogglers[0]);
90        accordionTogglers[0].click();
91      }
92    }
93
94    $(window).resize(() => {
95      let customAccordionItems = document.querySelectorAll(".custom-accordion-item.active");
96
97      if (customAccordionItems.length > 0) {
98        [...customAccordionItems].forEach((element) => {
99          let children = element.children;
100          let height = 0;
101          [...children].forEach((item) => {
102            height += item.clientHeight;
103          });
104
105          element.style["height"] = height + "px";
106        });
107      }
108    });
109
110    let footerMenu = document.getElementsByClassName("footer-menu")[0].getElementsByClassName("menu")[0];
111
112    let footerLists = footerMenu.getElementsByClassName("footer-menu-section-title");
113    [...footerLists].forEach((element) => {
114      element.addEventListener("click", (e) => {
115        console.log(e.currentTarget);
116        toggleAccordion(e.currentTarget.parentNode, footerLists);
117      });
118    });
119  }, 300);
120});
121
122function toggleAccordion(target, elements, multiple = false) {
123  if (!target.classList.contains("active")) {

124    [...elements].forEach((e) => {
125      closeAccordion(e.parentNode);
126    });
127
128    target.classList.add("active");
129    target.style["height"] = target.scrollHeight + "px";
130  } else {
131    if (!multiple) {
132      closeAccordion(target);
133    }
134  }
135
136  setTimeout(() => {
137    swiper_products?.updateAutoHeight(500);
138  }, 50);
139}
140
141function toggleAccordionImage(target, elements, multiple = false) {
142  if (!target.classList.contains("active")) {
143    [...elements].forEach((e) => {
144      e.classList.remove("active");
145    });
146    target.classList.add("active");
147  } else {
148    if (!multiple) {
149      target.classList.remove("active");
150    }
151  }
152}
153
154function closeAccordion(target) {
155  target.classList.remove("active");
156  target.style.removeProperty("height");
157}