미디어위키:Liberty.js

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 간격으로 애니메이션 적용
      });
    });
  });
});