미디어위키:Liberty.js

$(document).ready(function() {
  // 클릭 이벤트 핸들러
  $('.mw-collapsible').click(function() {
    var content = $(this).find('.mw-collapsible-content');
    var currentHeight = content.height(); // 현재 높이
    var targetHeight = content[0].scrollHeight; // 실제 콘텐츠의 전체 높이
    
    // 표가 접혀 있으면 펼치고, 펼쳐져 있으면 접기
    if (currentHeight === 0) {
      // 펼칠 때: 애니메이션으로 높이 변경
      animateHeight(content, 0, targetHeight);
    } else {
      // 접을 때: 애니메이션으로 높이 변경
      animateHeight(content, currentHeight, 0);
    }
  });

  // 애니메이션 함수
  function animateHeight(element, startHeight, endHeight) {
    var startTime = null;
    var duration = 500; // 애니메이션 지속 시간 (밀리초)

    function step(timestamp) {
      if (!startTime) startTime = timestamp;
      var progress = (timestamp - startTime) / duration;
      if (progress < 1) {
        var newHeight = startHeight + (endHeight - startHeight) * progress;
        element.height(newHeight); // 새로운 높이 설정
        requestAnimationFrame(step); // 계속 애니메이션 진행
      } else {
        element.height(endHeight); // 마지막에 정확한 높이 설정
      }
    }
    requestAnimationFrame(step); // 애니메이션 시작
  }
});