https://www.tokyodome-hotels.co.jp/assets/common/scripts/modules/toggle.js

1/**
2 * トグルアニメーション
3 */
4document.addEventListener('DOMContentLoaded', () => {
5    const details = document.querySelectorAll('.js-toggle');
6    if (!details) {
7        return;
8    }
9    details.forEach((el) => {
10        const summary = el.querySelector('summary');
11        const content = el.querySelector('.m-toggle__content');
12        if (!summary || !content) {
13            return;
14        }
15        summary.addEventListener('click', (e) => {
16            e.preventDefault(); // detailsのデフォルト挙動を止める
17            if (el.open) {
18                // close
19                const height = content.offsetHeight;
20                content.style.height = height + 'px';
21                requestAnimationFrame(() => {
22                    content.style.height = '0px';
23                });
24                content.addEventListener('transitionend', () => {
25                    el.open = false;
26                    content.style.height = '';
27                }, { once: true });
28            }
29            else {
30                // open
31                el.open = true;
32                const height = content.scrollHeight;
33                content.style.height = '0px';
34                requestAnimationFrame(() => {
35                    content.style.height = height + 'px';
36                });
37                content.addEventListener('transitionend', () => {
38                    content.style.height = '';
39                }, { once: true });
40            }
41        });
42    });
43});
44export {};