https://toraiz.jp/business/assets/js/modules/pp.accodion.js

1import { gsap } from "../vendor/gsap/src/index.js";
2import { ScrollToPlugin } from "../vendor/gsap/src/ScrollToPlugin.js";
3gsap.registerPlugin(ScrollToPlugin);
4
5export class ppAccodion {
6  constructor(obj = { id: "AC", block: ".__ac_block" }, scroll = false) {
7    let _ = this;
8
9    _.count = 0;
10    _.blocks = document.querySelectorAll(obj.block);
11    _.buttons = document.querySelectorAll(obj.block + " .__ac_button");
12
13    _.blocks.forEach((ele) => {
14      let id = obj.id + _.count;
15      ele.setAttribute("id", id);
16      ele.querySelector(".__ac_button").dataset.id = id;
17      _.count++;
18    });
19
20    _.buttons.forEach((ele) => {
21      let close = ele.parentNode.querySelector("._ac_close");
22
23      close.addEventListener("click", (e) => {
24        let parent = ele.parentNode;
25        let container = parent.querySelector(".__ac_container");
26        let h = parent.querySelector(".__ac_co").clientHeight;
27        let open = parent.querySelector(".__ac_button");
28        let id = open.dataset.id;
29        
30
31        if (parent.classList.contains("--action")) {
32          parent.classList.remove("--action");
33          container.style.height = 0 + "px";
34        } else {
35          parent.classList.add("--action");
36          container.style.height = h + "px";
37        }
38        pageScroll(id)
39
40       
41      });
42     
43
44      ele.addEventListener("click", function (e) {
45        let parent = ele.parentNode;
46        let container = parent.querySelector(".__ac_container");
47        let h = parent.querySelector(".__ac_co").clientHeight;
48        let id = ele.dataset.id;
49
50        if (parent.classList.contains("--action")) {
51          parent.classList.remove("--action");
52          container.style.height = 0 + "px";
53        } else {
54          parent.classList.add("--action");
55          container.style.height = h + "px";
56        }
57
58        if (scroll) pageScroll(id);
59        e.preventDefault();
60      });
61    });
62
63    function pageScroll(id) {
64      let target = document.getElementById(id);
65      let position =
66        window.pageYOffset + target.getBoundingClientRect().top - 120;
67      console.log(position);
68
69      gsap.to(window, {
70        duration: 0.5,
71
72        scrollTo: {
73          y: position,
74          autoKill: false,
75        },
76      });
77    }
78  }
79}