미디어위키:Common.js

/* 사용자 정의 펼치기 · 접기 */
$( function () {

	$( '.toggleBtn' ).each( function () {

		var $toggle = $( this );
		var toggleId = $toggle.attr( 'id' );

		if ( !toggleId ) {
			return;
		}

		var contentId = toggleId.replace( 'toggle', 'collapsible' );
		var textId = toggleId.replace( 'toggle', 'toggleText' );

		var $content = $( '#' + contentId );
		var $text = $( '#' + textId );

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

		/*
		 * 처음에는 접힌 상태
		 */
		$content.hide();

		$toggle
			.attr( 'aria-expanded', 'false' )
			.css( 'cursor', 'pointer' );

		$toggle.on( 'click', function ( event ) {

			event.preventDefault();

			/*
			 * 빠르게 여러 번 클릭했을 때
			 * 애니메이션이 계속 쌓이는 현상 방지
			 */
			$content.stop( true, false );

			if ( $content.is( ':visible' ) ) {

				/*
				 * 접기
				 */
				$content.slideUp( {
					duration: 300,
					easing: 'swing',

					complete: function () {

						/*
						 * jQuery 애니메이션 중 생성된
						 * 불필요한 스타일 제거
						 */
						$content.css( {
							height: '',
							paddingTop: '',
							paddingBottom: '',
							marginTop: '',
							marginBottom: '',
							overflow: ''
						} );

						/*
						 * 접힌 상태만 유지
						 */
						$content.hide();
					}
				} );

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

			} else {

				/*
				 * 펼치기
				 */
				$content.slideDown( {
					duration: 300,
					easing: 'swing',

					complete: function () {

						/*
						 * 애니메이션이 끝난 뒤
						 * height / margin / padding 등을 제거해
						 * 원래 레이아웃으로 복귀
						 */
						$content.css( {
							height: '',
							paddingTop: '',
							paddingBottom: '',
							marginTop: '',
							marginBottom: '',
							overflow: ''
						} );
					}
				} );

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

			if ( $text.length ) {
				$text.html(
					'[ 펼치기 · 접기 ]'
				);
			}

		} );

	} );

} );