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