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

  • 최근 수정 시각: 2026년 8월 20일 (목) 15:13
편집 토론 문서 역사
편집 요약 없음
편집 요약 없음
 
(같은 사용자의 중간 판 23개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/**
/* MediaWiki:Common.js */
* MediaWiki 커스텀 펼치기 / 접기 애니메이션
mw.hook('wikipage.content').add(function ($content) {
*
* 지원:
*
* 1. 일반 구조
*
* .mw-customtoggle-XXX
* #mw-customcollapsible-XXX
* └─ .mw-collapsible-content
*
*
* 2. 동일 ID 2개를 사용하는 교대형 구조
*
* #mw-customcollapsible-XXX
* └─ [ 버튼 ]
*
* #mw-customcollapsible-XXX.mw-collapsed
* ├─ [ 버튼 ]
* └─ 실제 내용
*
*
* 3. 여러 독립 토글
*
* TWICE_KOR
* TWICE_OVS
* TWICE_ETC
* TWICE_REL
*
*
* 애니메이션:
* height만 사용
* opacity 사용하지 않음
*/


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


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


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


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


/**
            if (initialized[suffix]) {
* 토글 클래스에서 식별자 추출
                return;
*
            }
* mw-customtoggle-Flora_LACTEA_01
* →
* Flora_LACTEA_01
*/
function getToggleName( toggle ) {
var prefix =
'mw-customtoggle-';


var classes =
            initialized[suffix] = true;
toggle.classList;


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


for (
            /*
i = 0;
            * 중복 ID가 있을 수 있으므로
i < classes.length;
            * #id 대신 attribute selector 사용
i++
            */
) {
            var $targets = $content.find('[id="' + targetId + '"]');
if (
classes[ i ].indexOf(
prefix
) === 0
) {
return classes[ i ].substring(
prefix.length
);
}
}


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




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


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


/**
                return;
* 같은 name에 해당하는 모든 target 검색
            }
*
* 동일 ID가 여러 개 있어도 전부 가져옴.
*/
function getTargets( name ) {
if ( !name ) {
return [];
}


var id =
'mw-customcollapsible-' +
name;


return document.querySelectorAll(
            /*
'[id="' +
            * =====================================================
escapeAttribute( id ) +
            * 일반 MediaWiki collapsible
'"]'
            * =====================================================
);
            */
}
            initNormalCollapsible(
                $content,
                cls,
                $targets.first()
            );
        });
    });




/**
* target의 직계
* .mw-collapsible-content 검색
*
* 중첩된 collapsible의 content를
* 잘못 잡지 않도록 children만 검사.
*/
function getDirectContent( target ) {
var children =
target.children;


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


for (
        var $toggles = $content.find('.' + cls);
i = 0;
i < children.length;
i++
) {
if (
children[ i ]
.classList
.contains(
'mw-collapsible-content'
)
) {
return children[ i ];
}
}


return null;
        /*
}
        * 일반 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;
* 일반 MediaWiki:
* .mw-collapsible-content
*
* 교대형:
* target 자체
*/
function getAnimatedElement( target ) {
var content =
getDirectContent(
target
);


if ( content ) {
return content;
}


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


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


/**
* target 자신의 직계 자식 중
* 해당 name의 토글 찾기
*
* 교대형 구조에서 펼쳐지는 쪽의
* 버튼 텍스트를 잠시 숨기기 위해 사용.
*/
function getOwnToggle(
target,
name
) {
var className =
'mw-customtoggle-' +
name;


var children =
        $toggles
target.children;
            .off('click.smoothSlide')
            .on('click.smoothSlide', function (e) {


var i;
                e.preventDefault();
                e.stopImmediatePropagation();


for (
i = 0;
i < children.length;
i++
) {
if (
children[ i ].classList &&
children[ i ].classList.contains(
className
)
) {
return children[ i ];
}
}


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




/**
                var opening = !$animTarget.is(':visible');
* 현재 접힌 상태인지 확인
*/
function isCollapsed(
target,
element
) {
if (
target.classList.contains(
'mw-collapsed'
)
) {
return true;
}


return (
window
.getComputedStyle(
element
)
.display === 'none'
);
}


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


/**
                    /*
* 현재 display값 기억
                    * MediaWiki collapsed 상태 제거
*
                    */
* inline-block 등을 다시 복원하기 위해 사용.
                    $target.removeClass('mw-collapsed');
*/
function rememberDisplay( element ) {
var display =
window
.getComputedStyle(
element
)
.display;


if (
display &&
display !== 'none'
) {
$( element ).data(
DATA_DISPLAY,
display
);
}
}


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


/**
                            /*
* 펼칠 때 사용할 display 계산
                            * jQuery 애니메이션 inline style 정리
*/
                            */
function getOpenDisplay( element ) {
                            $(this).css({
                                height: '',
                                overflow: '',
                                paddingTop: '',
                                paddingBottom: '',
                                marginTop: '',
                                marginBottom: ''
                            });
                        });


var stored =
$( element ).data(
DATA_DISPLAY
);


if ( stored ) {
                    $toggles.attr('aria-expanded', 'true');
return stored;
                }
}




/*
                /*
* 유효한 인라인 display가 있으면 사용
                * -------------------------------------------------
*/
                * 접기
if (
                * -------------------------------------------------
element.style.display &&
                */
element.style.display !== 'none'
                else {
) {
return element.style.display;
}


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


var computed =
                            /*
window
                            * 애니메이션 종료 후 collapsed 복원
.getComputedStyle(
                            */
element
                            $target.addClass('mw-collapsed');
)
.display;


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


if (
computed &&
computed !== 'none'
) {
return computed;
}


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


switch ( element.tagName ) {


case 'TABLE':
                return false;
return 'table';
            });
    }


case 'TBODY':
return 'table-row-group';


case 'THEAD':
return 'table-header-group';


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


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


case 'TD':
        if (!$panel.length) {
case 'TH':
            return;
return 'table-cell';
        }


case 'COLGROUP':
return 'table-column-group';


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


case 'CAPTION':
        if (!$topWrapper.length) {
return 'table-caption';
            return;
        }


case 'LI':
return 'list-item';
}


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


/*
* mw-collapsible 자체인 경우
*
* 100% 폭이면 block,
* 그 외에는 inline-block 우선.
*/
if (
element.classList.contains(
'mw-collapsible'
)
) {


if (
        if (!$topToggle.length || !$panelToggle.length) {
element.style.width === '100%' ||
            return;
element.style.width === '100.0%'
        }
) {
return 'block';
}


return 'inline-block';
}




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




/**
        $topWrapper
* 같은 name을 가진 모든 toggle의
            .stop(true, true)
* aria-expanded 변경
            .show()
*/
            .css({
function updateAria(
                height: '',
name,
                overflow: '',
expanded
                paddingTop: '',
) {
                paddingBottom: '',
var className =
                marginTop: '',
'mw-customtoggle-' +
                marginBottom: ''
name;
            });


var toggles =
document.getElementsByClassName(
className
);


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


for (
i = 0;
i < toggles.length;
i++
) {
toggles[ i ].setAttribute(
'aria-expanded',
expanded ?
'true' :
'false'
);
}
}




/**
        /*
* 펼치기
        * =========================================================
*
        * 위쪽 버튼 클릭 → 펼치기
* hideOwnToggle이 true인 경우
        * =========================================================
* 펼쳐지는 쪽의 버튼 텍스트는
        */
* 애니메이션 종료까지 visibility:hidden.
        $topToggle
*
            .off('click.smoothSlide')
* 공간 자체는 유지되므로
            .on('click.smoothSlide', function (e) {
* 레이아웃이 갑자기 변하지 않음.
*/
function expand(
target,
element,
name,
hideOwnToggle
) {
var $element =
$( element );


var ownToggle =
                e.preventDefault();
null;
                e.stopImmediatePropagation();




if (
                /*
hideOwnToggle &&
                * 애니메이션 중 재클릭 방지
element === target
                */
) {
                if ($panel.is(':animated')) {
ownToggle =
                    return false;
getOwnToggle(
                }
target,
name
);


if ( ownToggle ) {
ownToggle.style.visibility =
'hidden';
}
}


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


$element.stop(
true,
false
);


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


target.classList.remove(
'mw-collapsed'
);


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


/**
* 일반 MediaWiki 구조
*
* target
* └─ .mw-collapsible-content
*/
if (
element !== target
) {


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


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


complete:
function () {


$element.css(
                /*
{
                * ARIA
height:
                */
'',
                $topToggle.attr('aria-expanded', 'true');
                $panelToggle.attr('aria-expanded', 'true');


overflow:
''
}
);


                return false;
            });


if (
ownToggle
) {
ownToggle.style.visibility =
'';
}
}
}
);


return;
}


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


/**
                e.preventDefault();
* target 자체가 display:none인 구조
                e.stopImmediatePropagation();
*/
var display =
getOpenDisplay(
element
);




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


height:
'auto',


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


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


var targetHeight =
element.scrollHeight;


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


$element.css(
{
height:
'0px'
}
);


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


/*
* 강제 reflow
*/
void element.offsetHeight;


                return false;
            });
    }


$element.animate(
});
{
height:
targetHeight
},
{
duration:
DURATION,
 
easing:
EASING,
 
complete:
function () {
 
$element.css(
{
height:
'',
 
overflow:
''
}
);
 
 
/*
* 펼침이 완전히 끝난 뒤
* 내부 버튼 표시
*/
if (
ownToggle
) {
ownToggle.style.visibility =
'';
}
}
}
);
}
 
 
/**
* 접기
*/
function collapse(
target,
element
) {
var $element =
$( element );
 
 
$element.stop(
true,
false
);
 
 
rememberDisplay(
element
);
 
 
/**
* 일반 MediaWiki 구조
*/
if (
element !== target
) {
 
$element.slideUp(
{
duration:
DURATION,
 
easing:
EASING,
 
complete:
function () {
 
target.classList.add(
'mw-collapsed'
);
 
 
$element.css(
{
height:
'',
 
overflow:
''
}
);
}
}
);
 
return;
}
 
 
/**
* target 자체가 접히는 구조
*/
var startHeight =
element
.getBoundingClientRect()
.height;
 
 
$element.css(
{
height:
startHeight +
'px',
 
overflow:
'hidden'
}
);
 
 
void element.offsetHeight;
 
 
$element.animate(
{
height:
0
},
{
duration:
DURATION,
 
easing:
EASING,
 
complete:
function () {
 
target.classList.add(
'mw-collapsed'
);
 
 
$element.css(
{
display:
'none',
 
height:
'',
 
overflow:
''
}
);
}
}
);
}
 
 
/**
* 그룹 전체 토글
*
* target이 하나라면 일반 토글.
*
* 동일 ID target이 여러 개라면
* 각 요소를 현재 상태 반대로 변경.
*
* LACTEA:
*
* A = 상단 버튼
* B = 실제 내용
*
* 클릭 전:
*
* A 열림
* B 닫힘
*
* 클릭 후:
*
* A 닫힘
* B 열림
*/
function toggleGroup(
toggle
) {
var name =
getToggleName(
toggle
);
 
 
if ( !name ) {
return false;
}
 
 
var targets =
getTargets(
name
);
 
 
if (
!targets ||
!targets.length
) {
return false;
}
 
 
var multipleTargets =
targets.length > 1;
 
 
var i;
var openedAny =
false;
 
 
for (
i = 0;
i < targets.length;
i++
) {
 
var target =
targets[ i ];
 
 
var element =
getAnimatedElement(
target
);
 
 
var collapsed =
isCollapsed(
target,
element
);
 
 
if ( collapsed ) {
 
/*
* 동일 ID가 여러 개인 경우
* 새로 펼쳐지는 쪽 토글을
* 애니메이션 도중 숨김.
*
* 따라서
*
* [ 음반 목록 ]
* [ 음반 목록 ]
*
* 처럼 겹쳐 보이지 않음.
*/
expand(
target,
element,
name,
multipleTargets
);
 
 
openedAny =
true;
 
} else {
 
collapse(
target,
element
);
}
}
 
 
/*
* 일반적인 target 1개 구조만
* ARIA 상태를 일괄 갱신.
*
* 교대형은 두 target의 상태가
* 서로 반대이므로 제외.
*/
if (
targets.length === 1
) {
 
updateAria(
name,
openedAny
);
}
 
 
return true;
}
 
 
/**
* 클릭
*
* capture=true를 사용해서
* MediaWiki 기본 customtoggle보다
* 먼저 처리.
*/
document.addEventListener(
'click',
function ( event ) {
 
var toggle =
event.target.closest(
'.mw-customtoggle'
);
 
 
if ( !toggle ) {
return;
}
 
 
if (
!getToggleName(
toggle
)
) {
return;
}
 
 
event.preventDefault();
 
event.stopPropagation();
 
event.stopImmediatePropagation();
 
 
toggleGroup(
toggle
);
},
true
);
 
 
/**
* Enter / Space
*/
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();
 
 
toggleGroup(
toggle
);
},
true
);
 
 
/**
* 최초 display 상태 저장
*
* display:inline-block 같은 값을
* 나중에 정확히 복원하기 위한 처리.
*/
function initializeDisplays(
root
) {
var collapsibles =
root.querySelectorAll(
'.mw-collapsible'
);
 
var i;
 
 
for (
i = 0;
i < collapsibles.length;
i++
) {
 
var element =
collapsibles[ i ];
 
 
var display =
window
.getComputedStyle(
element
)
.display;
 
 
if (
display &&
display !== 'none'
) {
 
$( element ).data(
DATA_DISPLAY,
display
);
}
}
}
 
 
/**
* 최초 페이지 로드
*/
$( function () {
 
initializeDisplays(
document
);
 
} );
 
 
/**
* MediaWiki 동적 콘텐츠 대응
*
* AJAX / Lua / 확장기능 등으로
* 나중에 들어온 콘텐츠도 처리.
*/
if (
mw &&
mw.hook
) {
 
mw.hook(
'wikipage.content'
).add(
function ( $content ) {
 
if (
$content &&
$content[ 0 ]
) {
 
initializeDisplays(
$content[ 0 ]
);
}
}
);
}
 
 
}( jQuery, mediaWiki ) );

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;
            });
    }

});