Common.js

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
오페라: Ctrl-F5를 입력.

$(document).ready(function() {
    // 기존의 .custom-toggle 클릭 이벤트 핸들러
    $('.custom-toggle').click(function() {
        $(this).next('.custom-content').slideToggle();
    });

    // .toggle-collapse 클릭 이벤트 핸들러
    $('.toggle-collapse').click(function() {
        var $this = $(this);
        var rowsToToggle = parseInt($this.data('rows')) || 1;
        var isCollapsed = $this.data('collapsed') === true;
        var $currentRow = $this.closest('tr');

        // 사용자 정의 텍스트 확인
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || expandText;

for (let i = 0; i < rowsToToggle; i++) {
    $currentRow = $currentRow.next();
    if ($currentRow.length) {
        if (isCollapsed) {
            $currentRow.css({
                overflow: 'hidden',
                display: 'table-row',
                maxHeight: '0'
            }).animate({ maxHeight: '50px' }, 400); // 부드럽게 열림
        } else {
            $currentRow.animate({ maxHeight: '0' }, 400, function() {
                // 콜백 내부에서는 this를 직접 사용하여 컨텍스트를 명확히 함
                this.style.display = 'none'; // jQuery 없이 DOM API로 처리
            });
        }
    }
}




        // 상태 토글
        $this.data('collapsed', !isCollapsed);
        $this.text(isCollapsed ? collapseText : expandText);
    });

    // 페이지 로드 시 기본 상태 설정
    $('.toggle-collapse').each(function() {
        var $this = $(this);
        var rowsToToggle = parseInt($this.data('rows')) || 1;
        var isCollapsed = $this.data('collapsed') === true;

        // 사용자 정의 텍스트 확인
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || expandText;

        if (isCollapsed) {
            var $currentRow = $this.closest('tr');
            for (let i = 0; i < rowsToToggle; i++) {
                $currentRow = $currentRow.next();
                if ($currentRow.length) {
                    $currentRow.css({
                        display: 'none',
                        maxHeight: '0',
                        overflow: 'hidden'
                    }); // 즉시 숨김
                }
            }
            $this.text(expandText);
        } else {
            $this.text(collapseText);
        }
    });
});


    // <nolinkstyle> 태그를 .nolinkstyle 클래스로 변환
    $('nolinkstyle').each(function() {
        var $this = $(this);
        var content = $this.html();
        $this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
    });


    // Smooth toggle for rows with animations
    $('.smooth-toggle').click(function() {
        var $this = $(this);
        var $content = $this.closest('tr').next('.custom-content');

        if ($content.hasClass('expanded')) {
            $content.removeClass('expanded').css('max-height', '0');
        } else {
            $content.addClass('expanded').css('max-height', '1000px');
        }

        // Update button text
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || '접기';
        $this.text($content.hasClass('expanded') ? collapseText : expandText);
    });

    // Deprecated <nolinkstyle> handling is commented out.
    /*
    $('nolinkstyle').each(function() {
        var $this = $(this);
        var content = $this.html();
        $this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
    });
    */

미디어위키:Common.js