참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: 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() {
var $this = $(this); // 제목을 클릭한 div
var $content = $this.next('.custom-content'); // 제목 옆의 내용 영역
// 내용이 접혀 있으면 펼치고, 펼쳐져 있으면 접음
if ($content.is(":visible")) {
$content.slideUp(); // 접기
$this.text($this.data('expanded-text') || '펼치기'); // 제목 텍스트 변경
} else {
$content.slideDown(); // 펼치기
$this.text($this.data('collapsed-text') || '접기'); // 제목 텍스트 변경
}
});
// 페이지 로드 시 기본 상태 설정
$('.custom-toggle').each(function() {
var $this = $(this);
var $content = $this.next('.custom-content');
var contentType = $this.data('type'); // 유형 값을 가져옴
var isCollapsed = true; // 기본값은 접힘 상태
// '유형'에 따라 초기 상태 결정
if (contentType === '펼침') {
isCollapsed = false; // 유형이 '펼침'이면 펼쳐진 상태
}
if (isCollapsed) {
$content.hide(); // 접힌 상태로 시작
$this.text('펼치기'); // 버튼 텍스트 변경
} else {
$content.show(); // 펼친 상태로 시작
$this.text('접기'); // 버튼 텍스트 변경
}
});
// .toggle-collapse 클릭 이벤트 핸들러
$('.toggle-collapse').click(function() {
var $this = $(this);
var rowsToToggle = parseInt($this.data('rows')) || 1;
var isCollapsed = $this.data('collapsed') === true;
var $row = $this.closest('tr');
// 사용자 정의 텍스트 확인
var expandText = $this.data('expand-text') || '펼치기';
var collapseText = $this.data('collapse-text') || expandText; // 접기 텍스트가 없을 경우 펼치기 텍스트와 동일하게
// 지정된 행 수만큼 다음 행을 즉시 표시/숨김
for (var i = 0; i < rowsToToggle; i++) {
$row = $row.next();
if ($row.length) { // 다음 행이 존재하는지 확인
$row.toggle(); // 슬라이드 애니메이션 없이 토글
}
}
// 상태 토글
$this.data('collapsed', !isCollapsed);
$this.text($this.data('collapsed') ? expandText : collapseText);
});
// 페이지 로드 시 기본 상태 설정
$('.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 $row = $this.closest('tr');
for (var i = 0; i < rowsToToggle; i++) {
$row = $row.next();
if ($row.length) { // 다음 행이 존재하는지 확인
$row.hide(); // 페이지 로드 시 슬라이드 애니메이션 없이 즉시 숨김
}
}
$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>');
});
});