Common.js

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

파이어폭스 / 사파리: 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() {
        $(this).next('.custom-content').slideToggle(); 
    });

    // .toggle-collapse 클릭 이벤트 핸들러
    $('.toggle-collapse').click(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;

        // 현재 클릭한 버튼이 포함된 행의 다음 행들을 그룹화
        var $row = $this.closest('tr'); // 현재 클릭한 버튼이 포함된 행 선택
        var $rowsToToggle = $row.nextAll('.toggle-row').slice(0, rowsToToggle); // 다음 행들 그룹화

        // CSS 클래스로 전환 애니메이션 적용
        $rowsToToggle.toggleClass('show'); // 'show' 클래스를 토글하여 전환 효과 적용

        // 상태 토글 및 텍스트 변경
        $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;

        var $row = $this.closest('tr'); // 현재 클릭한 버튼이 포함된 행 선택
        var $rowsToToggle = $row.nextAll('.toggle-row').slice(0, rowsToToggle); // 다음 행들 그룹화

        // 기본 상태 설정: 숨겨야 하는 경우
        if (isCollapsed) {
            $rowsToToggle.removeClass('show'); // 페이지 로드 시 숨김
            $this.text(expandText);
        } else {
            $rowsToToggle.addClass('show'); // 페이지 로드 시 표시
            $this.text(collapseText);
        }
    });

    // <nolinkstyle> 태그를 .nolinkstyle 클래스로 변환
    $('nolinkstyle').each(function() {
        var $this = $(this);
        var content = $this.html();
        $this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
    });
});

미디어위키:Common.js