참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
$(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); // 애니메이션 시작
}
});