미디어위키:Common.js: 두 판 사이의 차이

  • 최근 수정 시각: 2026년 8월 20일 (목) 15:13
편집 토론 문서 역사
편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
 
(같은 사용자의 중간 판 40개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/**
/* MediaWiki:Common.js */
* MediaWiki 커스텀 펼치기/접기 슬라이드 애니메이션
mw.hook('wikipage.content').add(function ($content) {
*
* 지원 구조:
*
* 1)
* <div id="mw-customcollapsible-XXX">
*    <div class="mw-customtoggle-XXX mw-customtoggle">버튼</div>
*    <table>내용</table>
* </div>
*
* 2)
* <div id="mw-customcollapsible-XXX">
*    <div class="mw-customtoggle-XXX mw-customtoggle">버튼</div>
* </div>
* <table>내용</table>
*
* 둘 다 자동 처리
*/


( function () {
    var initialized = {};
'use strict';


var DURATION = 300;
    $content.find('[class*="mw-customtoggle-"]').each(function () {
        var classList = (this.className || '').split(/\s+/);


var READY_CLASS = 'custom-collapse-ready';
        classList.forEach(function (cls) {
var OPEN_CLASS = 'custom-collapse-open';
            if (cls.indexOf('mw-customtoggle-') !== 0) {
var ANIMATING_CLASS = 'custom-collapse-animating';
                return;
var CONTENT_CLASS = 'custom-collapse-content';
            }


            var suffix = cls.substring('mw-customtoggle-'.length);


/* ==============================
            if (initialized[suffix]) {
  toggle 이름 추출
                return;
  ============================== */
            }


function getToggleName( toggle ) {
            initialized[suffix] = true;
var prefix = 'mw-customtoggle-';
var classes = toggle.classList;
var i;


for ( i = 0; i < classes.length; i++ ) {
            var targetId = 'mw-customcollapsible-' + suffix;
if ( classes[ i ].indexOf( prefix ) === 0 ) {
return classes[ i ].substring(
prefix.length
);
}
}


return null;
            /*
}
            * 중복 ID가 있을 수 있으므로
            * #id 대신 attribute selector 사용
            */
            var $targets = $content.find('[id="' + targetId + '"]');


            if (!$targets.length) {
                return;
            }


/* ==============================
  연결된 collapsible 찾기
  ============================== */


function getTarget( toggle ) {
            /*
var name = getToggleName( toggle );
            * =====================================================
            * 특수형
            *
            * 아나운서 표처럼:
            *
            * [상단 버튼 wrapper]
            * [실제 내용 패널]
            *
            * 두 요소가 같은 ID를 공유하고,
            * 실제 패널 안에 wikitable이 있는 구조
            * =====================================================
            */
            var $specialPanel = $targets.filter(function () {
                return $(this).find('table.wikitable').length > 0;
            });


if ( !name ) {
            if ($targets.length > 1 && $specialPanel.length) {
return null;
                initStackedCollapsible(
}
                    $content,
                    cls,
                    $targets
                );


return document.getElementById(
                return;
'mw-customcollapsible-' + name
            }
);
}




/* ==============================
            /*
  다음 custom collapsible인지 검사
            * =====================================================
  ============================== */
            * 일반 MediaWiki collapsible
            * =====================================================
            */
            initNormalCollapsible(
                $content,
                cls,
                $targets.first()
            );
        });
    });


function isNextCollapsible( element ) {
if ( !element || !element.id ) {
return false;
}


return (
element.id.indexOf(
'mw-customcollapsible-'
) === 0
);
}


    /*
    * =============================================================
    * 일반 펼치기 · 접기
    * =============================================================
    */
    function initNormalCollapsible($content, cls, $target) {


/* ==============================
        var $toggles = $content.find('.' + cls);
  실제 내용 wrapper 만들기
  ============================== */


function createContentWrapper( target, toggle ) {
        /*
        * 일반 MediaWiki 구조:
        *
        * .mw-collapsible
        *  └ .mw-collapsible-content
        *
        * content가 있으면 content만 애니메이션
        */
        var $contentTarget = $target.children('.mw-collapsible-content');


/*
        if (!$contentTarget.length) {
* 이미 만들었으면 재사용
            $contentTarget = $target.find('.mw-collapsible-content').first();
*/
        }
var existing =
target.querySelector(
':scope > .' + CONTENT_CLASS
);


if ( existing ) {
        var $animTarget = $contentTarget.length
return existing;
            ? $contentTarget
}
            : $target;




/* --------------------------------
        /*
  경우 1:
        * 현재 상태를 기준으로 초기 aria 설정
  내용이 target 내부에 있음
        */
  -------------------------------- */
        var initiallyOpen = $animTarget.is(':visible');


var internalNodes = [];
        $toggles.attr(
var node = toggle.nextSibling;
            'aria-expanded',
            initiallyOpen ? 'true' : 'false'
        );


while ( node ) {
internalNodes.push( node );
node = node.nextSibling;
}


if ( internalNodes.length ) {
        $toggles
            .off('click.smoothSlide')
            .on('click.smoothSlide', function (e) {


var internalWrapper =
                e.preventDefault();
document.createElement( 'div' );
                e.stopImmediatePropagation();


internalWrapper.className =
CONTENT_CLASS;


internalNodes.forEach(
                /*
function ( child ) {
                * 애니메이션 중 재클릭 방지
internalWrapper.appendChild(
                */
child
                if ($animTarget.is(':animated')) {
);
                    return false;
}
                }
);


target.appendChild(
internalWrapper
);


return internalWrapper;
                var opening = !$animTarget.is(':visible');
}




/* --------------------------------
                /*
  경우 2:
                * -------------------------------------------------
  내용이 target 다음 형제에 있음
                * 펼치기
  -------------------------------- */
                * -------------------------------------------------
                */
                if (opening) {


var parent = target.parentNode;
                    /*
                    * MediaWiki collapsed 상태 제거
                    */
                    $target.removeClass('mw-collapsed');


if ( !parent ) {
return null;
}


var externalWrapper =
                    /*
document.createElement( 'div' );
                    * 내용만 펼침
                    */
                    $animTarget
                        .stop(true, true)
                        .hide()
                        .slideDown(250, function () {


externalWrapper.className =
                            /*
CONTENT_CLASS;
                            * jQuery 애니메이션 inline style 정리
                            */
                            $(this).css({
                                height: '',
                                overflow: '',
                                paddingTop: '',
                                paddingBottom: '',
                                marginTop: '',
                                marginBottom: ''
                            });
                        });


var sibling =
target.nextSibling;


var foundContent = false;
                    $toggles.attr('aria-expanded', 'true');
                }


while ( sibling ) {


var nextSibling =
                /*
sibling.nextSibling;
                * -------------------------------------------------
                * 접기
                * -------------------------------------------------
                */
                else {


/*
                    $animTarget
* 다음 customcollapsible을 만나면
                        .stop(true, true)
* 현재 영역 종료
                        .slideUp(250, function () {
*/
if (
sibling.nodeType === 1 &&
isNextCollapsible( sibling )
) {
break;
}


/*
                            /*
* 공백 텍스트는 무시
                            * 애니메이션 종료 후 collapsed 복원
*/
                            */
if (
                            $target.addClass('mw-collapsed');
sibling.nodeType === 3 &&
!sibling.textContent.trim()
) {
sibling = nextSibling;
continue;
}


/*
                            $(this).css({
* script / style은 건드리지 않음
                                display: 'none',
*/
                                height: '',
if (
                                overflow: '',
sibling.nodeType === 1 &&
                                paddingTop: '',
(
                                paddingBottom: '',
sibling.tagName === 'SCRIPT' ||
                                marginTop: '',
sibling.tagName === 'STYLE'
                                marginBottom: ''
)
                            });
) {
                        });
break;
}


externalWrapper.appendChild(
sibling
);


foundContent = true;
                    $toggles.attr('aria-expanded', 'false');
                }


sibling = nextSibling;
}


if ( !foundContent ) {
                return false;
return null;
            });
}
    }


parent.insertBefore(
externalWrapper,
sibling
);


return externalWrapper;
}


    /*
    * =============================================================
    * 아나운서형 특수 펼치기 · 접기
    * =============================================================
    *
    * DOM 예:
    *
    * [남성 버튼 wrapper]
    * [남성 실제 패널]
    * [여성 버튼 wrapper]
    * [여성 실제 패널]
    *
    * 패널을 이동시키지 않고
    * 원래 DOM 위치에서 펼친다.
    *
    * 중요한 점:
    *
    * wrapper와 panel을 둘 다 애니메이션하지 않는다.
    *
    * 버튼 wrapper는 즉시 교체하고,
    * 실제 패널 하나만 slide 애니메이션한다.
    *
    * 따라서 이중 움직임이나
    * 중간 겹침 현상이 최소화된다.
    * =============================================================
    */
    function initStackedCollapsible($content, cls, $targets) {


/* ==============================
        /*
  즉시 펼쳐진 상태 설정
        * wikitable이 들어 있는 요소를 실제 패널로 사용
  ============================== */
        */
        var $panel = $targets.filter(function () {
            return $(this).find('table.wikitable').length > 0;
        }).first();


function setOpenImmediately(
        if (!$panel.length) {
target,
            return;
toggle,
        }
content
) {
target.classList.remove(
'mw-collapsed'
);


target.classList.add(
OPEN_CLASS
);


content.style.display = '';
        /*
content.style.height = '';
        * 실제 패널이 아닌 동일 ID 요소 중
content.style.overflow = '';
        * 해당 toggle을 포함하는 요소 = 상단 버튼 wrapper
        */
        var $topWrapper = $targets.not($panel).filter(function () {
            return $(this).find('.' + cls).length > 0;
        }).first();


toggle.setAttribute(
        if (!$topWrapper.length) {
'aria-expanded',
            return;
'true'
        }
);
}




/* ==============================
        var $topToggle = $topWrapper.find('.' + cls).first();
  즉시 접힌 상태 설정
        var $panelToggle = $panel.find('.' + cls).first();
  ============================== */


function setClosedImmediately(
target,
toggle,
content
) {
target.classList.add(
'mw-collapsed'
);


target.classList.remove(
        if (!$topToggle.length || !$panelToggle.length) {
OPEN_CLASS
            return;
);
        }


content.style.display = 'none';
content.style.height = '';
content.style.overflow = '';


toggle.setAttribute(
'aria-expanded',
'false'
);
}


        /*
        * =========================================================
        * 최초 상태
        * =========================================================
        */
        $panel
            .stop(true, true)
            .addClass('mw-collapsed')
            .hide()
            .css({
                height: '',
                overflow: '',
                paddingTop: '',
                paddingBottom: '',
                marginTop: '',
                marginBottom: ''
            });


/* ==============================
  펼치기 애니메이션
  ============================== */


function openContent(
        $topWrapper
target,
            .stop(true, true)
toggle,
            .show()
content
            .css({
) {
                height: '',
if (
                overflow: '',
content.classList.contains(
                paddingTop: '',
ANIMATING_CLASS
                paddingBottom: '',
)
                marginTop: '',
) {
                marginBottom: ''
return;
            });
}


content.classList.add(
ANIMATING_CLASS
);


target.classList.remove(
        $topToggle.attr('aria-expanded', 'false');
'mw-collapsed'
        $panelToggle.attr('aria-expanded', 'false');
);


content.style.display = 'block';
content.style.overflow = 'hidden';
content.style.height = '0px';


/*
* 브라우저가 0px 상태를 먼저
* 그리도록 한 프레임 기다림
*/
window.requestAnimationFrame(
function () {


var endHeight =
        /*
content.scrollHeight;
        * =========================================================
        * 위쪽 버튼 클릭 → 펼치기
        * =========================================================
        */
        $topToggle
            .off('click.smoothSlide')
            .on('click.smoothSlide', function (e) {


content.style.transition =
                e.preventDefault();
'height ' +
                e.stopImmediatePropagation();
DURATION +
'ms ease';


/*
* 한 프레임을 더 나누어
* height transition이 확실하게 실행되게 함
*/
window.requestAnimationFrame(
function () {
content.style.height =
endHeight + 'px';
}
);
}
);


window.setTimeout(
                /*
function () {
                * 애니메이션 중 재클릭 방지
                */
                if ($panel.is(':animated')) {
                    return false;
                }


content.classList.remove(
ANIMATING_CLASS
);


target.classList.add(
                /*
OPEN_CLASS
                * 이미 열려 있으면 중단
);
                */
                if ($panel.is(':visible')) {
                    return false;
                }


content.style.transition = '';
content.style.height = '';
content.style.overflow = '';
content.style.display = '';


toggle.setAttribute(
                /*
'aria-expanded',
                * -------------------------------------------------
'true'
                * 상단 버튼 wrapper는 즉시 숨김
);
                *
                * wrapper 자체를 애니메이션하지 않으므로
                * 이중 움직임이 발생하지 않는다.
                * -------------------------------------------------
                */
                $topWrapper
                    .stop(true, true)
                    .hide();


},
DURATION + 40
);
}


                /*
                * MediaWiki collapsed 상태 제거
                */
                $panel.removeClass('mw-collapsed');


/* ==============================
  접기 애니메이션
  ============================== */


function closeContent(
                /*
target,
                * -------------------------------------------------
toggle,
                * 실제 패널 하나만 부드럽게 펼침
content
                * -------------------------------------------------
) {
                */
if (
                $panel
content.classList.contains(
                    .stop(true, true)
ANIMATING_CLASS
                    .hide()
)
                    .slideDown(260, function () {
) {
return;
}


content.classList.add(
                        /*
ANIMATING_CLASS
                        * animation 종료 후
);
                        * jQuery가 만든 inline style 정리
                        */
                        $(this).css({
                            height: '',
                            overflow: '',
                            paddingTop: '',
                            paddingBottom: '',
                            marginTop: '',
                            marginBottom: ''
                        });
                    });


var startHeight =
content.getBoundingClientRect()
.height;


if ( startHeight <= 0 ) {
                /*
content.classList.remove(
                * ARIA
ANIMATING_CLASS
                */
);
                $topToggle.attr('aria-expanded', 'true');
                $panelToggle.attr('aria-expanded', 'true');


setClosedImmediately(
target,
toggle,
content
);


return;
                return false;
}
            });


content.style.overflow = 'hidden';
content.style.height =
startHeight + 'px';


content.style.transition =
'height ' +
DURATION +
'ms ease';


/*
        /*
* 현재 높이를 브라우저에 먼저 반영
        * =========================================================
*/
        * 패널 안쪽 버튼 클릭 → 접기
content.offsetHeight;
        * =========================================================
        */
        $panelToggle
            .off('click.smoothSlide')
            .on('click.smoothSlide', function (e) {


window.requestAnimationFrame(
                e.preventDefault();
function () {
                e.stopImmediatePropagation();
content.style.height =
'0px';
}
);


window.setTimeout(
function () {


content.classList.remove(
                /*
ANIMATING_CLASS
                * 애니메이션 중 재클릭 방지
);
                */
                if ($panel.is(':animated')) {
                    return false;
                }


target.classList.remove(
OPEN_CLASS
);


target.classList.add(
                /*
'mw-collapsed'
                * -------------------------------------------------
);
                * 실제 패널 하나만 접음
                * -------------------------------------------------
                */
                $panel
                    .stop(true, true)
                    .slideUp(260, function () {


content.style.display =
                        /*
'none';
                        * 패널을 완전히 닫은 뒤
                        * collapsed 상태 복원
                        */
                        $(this)
                            .addClass('mw-collapsed')
                            .css({
                                display: 'none',
                                height: '',
                                overflow: '',
                                paddingTop: '',
                                paddingBottom: '',
                                marginTop: '',
                                marginBottom: ''
                            });


content.style.transition =
'';


content.style.height = '';
                        /*
content.style.overflow = '';
                        * -------------------------------------------------
                        * 원래 상단 버튼 즉시 복귀
                        *
                        * 별도 애니메이션을 하지 않기 때문에
                        * 닫힘 동작도 한 번의 움직임으로 보인다.
                        * -------------------------------------------------
                        */
                        $topWrapper
                            .stop(true, true)
                            .show()
                            .css({
                                height: '',
                                overflow: '',
                                paddingTop: '',
                                paddingBottom: '',
                                marginTop: '',
                                marginBottom: ''
                            });
                    });


toggle.setAttribute(
'aria-expanded',
'false'
);


},
                /*
DURATION + 40
                * ARIA
);
                */
}
                $topToggle.attr('aria-expanded', 'false');
                $panelToggle.attr('aria-expanded', 'false');




/* ==============================
                return false;
  토글 실행
            });
  ============================== */
    }


function toggleContent( toggle ) {
});
var target =
getTarget( toggle );
 
if ( !target ) {
return;
}
 
var content =
target._customCollapseContent;
 
if ( !content ) {
content =
createContentWrapper(
target,
toggle
);
 
target._customCollapseContent =
content;
}
 
if ( !content ) {
return;
}
 
var isOpen =
toggle.getAttribute(
'aria-expanded'
) !== 'false' &&
!target.classList.contains(
'mw-collapsed'
);
 
if ( isOpen ) {
closeContent(
target,
toggle,
content
);
} else {
openContent(
target,
toggle,
content
);
}
}
 
 
/* ==============================
  초기화
  ============================== */
 
function initializeToggle( toggle ) {
var target =
getTarget( toggle );
 
if ( !target ) {
return;
}
 
if (
target.classList.contains(
READY_CLASS
)
) {
return;
}
 
var content =
createContentWrapper(
target,
toggle
);
 
if ( !content ) {
return;
}
 
target._customCollapseContent =
content;
 
target.classList.add(
READY_CLASS
);
 
/*
* 최초 상태 판별
*/
var initiallyClosed =
target.classList.contains(
'mw-collapsed'
) ||
toggle.getAttribute(
'aria-expanded'
) === 'false';
 
if ( initiallyClosed ) {
 
setClosedImmediately(
target,
toggle,
content
);
 
} else {
 
setOpenImmediately(
target,
toggle,
content
);
 
}
}
 
 
function initializeAll() {
var toggles =
document.querySelectorAll(
'.mw-customtoggle'
);
 
toggles.forEach(
function ( toggle ) {
 
if (
getToggleName(
toggle
)
) {
initializeToggle(
toggle
);
}
 
}
);
}
 
 
/* ==============================
  클릭 이벤트
  ============================== */
 
document.addEventListener(
'click',
function ( event ) {
 
var toggle =
event.target.closest(
'.mw-customtoggle'
);
 
if ( !toggle ) {
return;
}
 
if (
!getToggleName(
toggle
)
) {
return;
}
 
/*
* MediaWiki 기본 즉시 토글 차단
*/
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
 
toggleContent(
toggle
);
 
},
true
);
 
 
/* ==============================
  키보드
  ============================== */
 
document.addEventListener(
'keydown',
function ( event ) {
 
if (
event.key !== 'Enter' &&
event.key !== ' '
) {
return;
}
 
var toggle =
event.target.closest(
'.mw-customtoggle'
);
 
if ( !toggle ) {
return;
}
 
if (
!getToggleName(
toggle
)
) {
return;
}
 
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
 
toggleContent(
toggle
);
 
},
true
);
 
 
/* ==============================
  페이지 로드
  ============================== */
 
if (
document.readyState ===
'loading'
) {
 
document.addEventListener(
'DOMContentLoaded',
initializeAll
);
 
} else {
 
initializeAll();
 
}
 
 
/*
* MediaWiki 동적 콘텐츠 대응
*/
if (
window.mw &&
mw.hook
) {
 
mw.hook(
'wikipage.content'
).add(
function () {
initializeAll();
}
);
 
}
 
}() );

2026년 8월 20일 (목) 15:13 기준 최신판

/* MediaWiki:Common.js */
mw.hook('wikipage.content').add(function ($content) {

    var initialized = {};

    $content.find('[class*="mw-customtoggle-"]').each(function () {
        var classList = (this.className || '').split(/\s+/);

        classList.forEach(function (cls) {
            if (cls.indexOf('mw-customtoggle-') !== 0) {
                return;
            }

            var suffix = cls.substring('mw-customtoggle-'.length);

            if (initialized[suffix]) {
                return;
            }

            initialized[suffix] = true;

            var targetId = 'mw-customcollapsible-' + suffix;

            /*
             * 중복 ID가 있을 수 있으므로
             * #id 대신 attribute selector 사용
             */
            var $targets = $content.find('[id="' + targetId + '"]');

            if (!$targets.length) {
                return;
            }


            /*
             * =====================================================
             * 특수형
             *
             * 아나운서 표처럼:
             *
             * [상단 버튼 wrapper]
             * [실제 내용 패널]
             *
             * 두 요소가 같은 ID를 공유하고,
             * 실제 패널 안에 wikitable이 있는 구조
             * =====================================================
             */
            var $specialPanel = $targets.filter(function () {
                return $(this).find('table.wikitable').length > 0;
            });

            if ($targets.length > 1 && $specialPanel.length) {
                initStackedCollapsible(
                    $content,
                    cls,
                    $targets
                );

                return;
            }


            /*
             * =====================================================
             * 일반 MediaWiki collapsible
             * =====================================================
             */
            initNormalCollapsible(
                $content,
                cls,
                $targets.first()
            );
        });
    });



    /*
     * =============================================================
     * 일반 펼치기 · 접기
     * =============================================================
     */
    function initNormalCollapsible($content, cls, $target) {

        var $toggles = $content.find('.' + cls);

        /*
         * 일반 MediaWiki 구조:
         *
         * .mw-collapsible
         *   └ .mw-collapsible-content
         *
         * content가 있으면 content만 애니메이션
         */
        var $contentTarget = $target.children('.mw-collapsible-content');

        if (!$contentTarget.length) {
            $contentTarget = $target.find('.mw-collapsible-content').first();
        }

        var $animTarget = $contentTarget.length
            ? $contentTarget
            : $target;


        /*
         * 현재 상태를 기준으로 초기 aria 설정
         */
        var initiallyOpen = $animTarget.is(':visible');

        $toggles.attr(
            'aria-expanded',
            initiallyOpen ? 'true' : 'false'
        );


        $toggles
            .off('click.smoothSlide')
            .on('click.smoothSlide', function (e) {

                e.preventDefault();
                e.stopImmediatePropagation();


                /*
                 * 애니메이션 중 재클릭 방지
                 */
                if ($animTarget.is(':animated')) {
                    return false;
                }


                var opening = !$animTarget.is(':visible');


                /*
                 * -------------------------------------------------
                 * 펼치기
                 * -------------------------------------------------
                 */
                if (opening) {

                    /*
                     * MediaWiki collapsed 상태 제거
                     */
                    $target.removeClass('mw-collapsed');


                    /*
                     * 내용만 펼침
                     */
                    $animTarget
                        .stop(true, true)
                        .hide()
                        .slideDown(250, function () {

                            /*
                             * jQuery 애니메이션 inline style 정리
                             */
                            $(this).css({
                                height: '',
                                overflow: '',
                                paddingTop: '',
                                paddingBottom: '',
                                marginTop: '',
                                marginBottom: ''
                            });
                        });


                    $toggles.attr('aria-expanded', 'true');
                }


                /*
                 * -------------------------------------------------
                 * 접기
                 * -------------------------------------------------
                 */
                else {

                    $animTarget
                        .stop(true, true)
                        .slideUp(250, function () {

                            /*
                             * 애니메이션 종료 후 collapsed 복원
                             */
                            $target.addClass('mw-collapsed');

                            $(this).css({
                                display: 'none',
                                height: '',
                                overflow: '',
                                paddingTop: '',
                                paddingBottom: '',
                                marginTop: '',
                                marginBottom: ''
                            });
                        });


                    $toggles.attr('aria-expanded', 'false');
                }


                return false;
            });
    }



    /*
     * =============================================================
     * 아나운서형 특수 펼치기 · 접기
     * =============================================================
     *
     * DOM 예:
     *
     * [남성 버튼 wrapper]
     * [남성 실제 패널]
     * [여성 버튼 wrapper]
     * [여성 실제 패널]
     *
     * 패널을 이동시키지 않고
     * 원래 DOM 위치에서 펼친다.
     *
     * 중요한 점:
     *
     * wrapper와 panel을 둘 다 애니메이션하지 않는다.
     *
     * 버튼 wrapper는 즉시 교체하고,
     * 실제 패널 하나만 slide 애니메이션한다.
     *
     * 따라서 이중 움직임이나
     * 중간 겹침 현상이 최소화된다.
     * =============================================================
     */
    function initStackedCollapsible($content, cls, $targets) {

        /*
         * wikitable이 들어 있는 요소를 실제 패널로 사용
         */
        var $panel = $targets.filter(function () {
            return $(this).find('table.wikitable').length > 0;
        }).first();

        if (!$panel.length) {
            return;
        }


        /*
         * 실제 패널이 아닌 동일 ID 요소 중
         * 해당 toggle을 포함하는 요소 = 상단 버튼 wrapper
         */
        var $topWrapper = $targets.not($panel).filter(function () {
            return $(this).find('.' + cls).length > 0;
        }).first();

        if (!$topWrapper.length) {
            return;
        }


        var $topToggle = $topWrapper.find('.' + cls).first();
        var $panelToggle = $panel.find('.' + cls).first();


        if (!$topToggle.length || !$panelToggle.length) {
            return;
        }



        /*
         * =========================================================
         * 최초 상태
         * =========================================================
         */
        $panel
            .stop(true, true)
            .addClass('mw-collapsed')
            .hide()
            .css({
                height: '',
                overflow: '',
                paddingTop: '',
                paddingBottom: '',
                marginTop: '',
                marginBottom: ''
            });


        $topWrapper
            .stop(true, true)
            .show()
            .css({
                height: '',
                overflow: '',
                paddingTop: '',
                paddingBottom: '',
                marginTop: '',
                marginBottom: ''
            });


        $topToggle.attr('aria-expanded', 'false');
        $panelToggle.attr('aria-expanded', 'false');



        /*
         * =========================================================
         * 위쪽 버튼 클릭 → 펼치기
         * =========================================================
         */
        $topToggle
            .off('click.smoothSlide')
            .on('click.smoothSlide', function (e) {

                e.preventDefault();
                e.stopImmediatePropagation();


                /*
                 * 애니메이션 중 재클릭 방지
                 */
                if ($panel.is(':animated')) {
                    return false;
                }


                /*
                 * 이미 열려 있으면 중단
                 */
                if ($panel.is(':visible')) {
                    return false;
                }


                /*
                 * -------------------------------------------------
                 * 상단 버튼 wrapper는 즉시 숨김
                 *
                 * wrapper 자체를 애니메이션하지 않으므로
                 * 이중 움직임이 발생하지 않는다.
                 * -------------------------------------------------
                 */
                $topWrapper
                    .stop(true, true)
                    .hide();


                /*
                 * MediaWiki collapsed 상태 제거
                 */
                $panel.removeClass('mw-collapsed');


                /*
                 * -------------------------------------------------
                 * 실제 패널 하나만 부드럽게 펼침
                 * -------------------------------------------------
                 */
                $panel
                    .stop(true, true)
                    .hide()
                    .slideDown(260, function () {

                        /*
                         * animation 종료 후
                         * jQuery가 만든 inline style 정리
                         */
                        $(this).css({
                            height: '',
                            overflow: '',
                            paddingTop: '',
                            paddingBottom: '',
                            marginTop: '',
                            marginBottom: ''
                        });
                    });


                /*
                 * ARIA
                 */
                $topToggle.attr('aria-expanded', 'true');
                $panelToggle.attr('aria-expanded', 'true');


                return false;
            });



        /*
         * =========================================================
         * 패널 안쪽 버튼 클릭 → 접기
         * =========================================================
         */
        $panelToggle
            .off('click.smoothSlide')
            .on('click.smoothSlide', function (e) {

                e.preventDefault();
                e.stopImmediatePropagation();


                /*
                 * 애니메이션 중 재클릭 방지
                 */
                if ($panel.is(':animated')) {
                    return false;
                }


                /*
                 * -------------------------------------------------
                 * 실제 패널 하나만 접음
                 * -------------------------------------------------
                 */
                $panel
                    .stop(true, true)
                    .slideUp(260, function () {

                        /*
                         * 패널을 완전히 닫은 뒤
                         * collapsed 상태 복원
                         */
                        $(this)
                            .addClass('mw-collapsed')
                            .css({
                                display: 'none',
                                height: '',
                                overflow: '',
                                paddingTop: '',
                                paddingBottom: '',
                                marginTop: '',
                                marginBottom: ''
                            });


                        /*
                         * -------------------------------------------------
                         * 원래 상단 버튼 즉시 복귀
                         *
                         * 별도 애니메이션을 하지 않기 때문에
                         * 닫힘 동작도 한 번의 움직임으로 보인다.
                         * -------------------------------------------------
                         */
                        $topWrapper
                            .stop(true, true)
                            .show()
                            .css({
                                height: '',
                                overflow: '',
                                paddingTop: '',
                                paddingBottom: '',
                                marginTop: '',
                                marginBottom: ''
                            });
                    });


                /*
                 * ARIA
                 */
                $topToggle.attr('aria-expanded', 'false');
                $panelToggle.attr('aria-expanded', 'false');


                return false;
            });
    }

});