미디어위키: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) {
      // 펼칠 때: 콘텐츠 높이를 0에서 실제 높이로 애니메이션
      animateHeight(content, 0, targetHeight);
    } else {
      // 접을 때: 콘텐츠 높이를 실제 높이에서 0으로 애니메이션
      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); // 애니메이션 시작
  }
});