https://kaleidoyao.github.io/js/layouts/categoryList.js

1const toggleStyle = (element, style, firstValue, secondValue) => {
2  element.style[style] =
3    element.style[style] === firstValue ? secondValue : firstValue;
4};
5
6const setupCategoryList = () => {
7  const parentElements = Array.from(
8    document.querySelectorAll(".all-category-list-item"),
9  ).filter((item) =>
10    item.parentElement.classList.contains("all-category-list"),
11  );
12
13  parentElements.forEach((parentElement) => {
14    const childElements = parentElement.querySelectorAll(
15      ".all-category-list-child",
16    );
17    childElements.forEach((childElement) => {
18      childElement.style.maxHeight = "0px";
19      childElement.style.marginTop = "0px";
20    });
21
22    parentElement.addEventListener("click", () => {
23      const clickedElementTopOffset = parentElement.offsetTop;
24      childElements.forEach((childElement) => {
25        toggleStyle(childElement, "maxHeight", "0px", "1000px");
26        toggleStyle(childElement, "marginTop", "0px", "15px");
27      });
28
29      parentElements.forEach((siblingElement) => {
30        if (
31          siblingElement.offsetTop === clickedElementTopOffset &&
32          siblingElement !== parentElement
33        ) {
34          const siblingChildElements = siblingElement.querySelectorAll(
35            ".all-category-list-child",
36          );
37          siblingChildElements.forEach((siblingChildElement) => {
38            toggleStyle(siblingChildElement, "maxHeight", "0px", "1000px");
39            toggleStyle(siblingChildElement, "marginTop", "0px", "15px");
40          });
41        }
42      });
43    });
44  });
45};
46
47try {
48  swup.hooks.on("page:view", setupCategoryList);
49} catch (e) {
50  console.error(e);
51}
52
53document.addEventListener("DOMContentLoaded", setupCategoryList);