|
|
| (같은 사용자의 중간 판 40개는 보이지 않습니다) |
| 1번째 줄: |
1번째 줄: |
| document.addEventListener('DOMContentLoaded', function () {
| |
| const collapsibles = document.querySelectorAll('.mw-collapsible');
| |
|
| |
|
| collapsibles.forEach(function(collapsible) {
| |
| const trigger = collapsible.querySelector('.mw-collapsible-toggle'); // 펼치기/접기 버튼
| |
| const content = collapsible.querySelector('.mw-collapsible-content'); // 펼쳐질 내용
| |
|
| |
| // 펼치기/접기 버튼 클릭 시
| |
| trigger.addEventListener('click', function() {
| |
| if (content.style.maxHeight) {
| |
| // 접기 상태일 때
| |
| content.style.maxHeight = null; // 접기
| |
| content.style.transition = "max-height 0.5s ease-out"; // 접을 때 애니메이션
| |
| } else {
| |
| // 펼치기 상태일 때
| |
| content.style.maxHeight = content.scrollHeight + "px"; // 실제 높이로 설정하여 펼치기
| |
| content.style.transition = "max-height 0.5s ease-in"; // 펼칠 때 애니메이션
| |
| }
| |
|
| |
| // 각 행에 대해 애니메이션을 적용
| |
| const rows = content.querySelectorAll('tr');
| |
| rows.forEach(function(row, index) {
| |
| setTimeout(function() {
| |
| row.style.opacity = 1;
| |
| row.style.transform = "translateY(0)";
| |
| }, index * 100); // 각 행에 대해 100ms 간격으로 애니메이션 적용
| |
| });
| |
| });
| |
| });
| |
| });
| |