MediaWiki:ExpandableBox.js

注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。

Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
Microsoft Edge: Ctrl を押しながら 最新の情報に更新 をクリックするか、Ctrl-F5 を押してください。

/* 折り畳みボックス用のJS */
function expandableBoxFunc() {
    // 'custom-template-expandable-box' クラスを持つ要素をすべて取得
    var expandableBoxes = document.querySelectorAll('.custom-template-expandable-box');

    expandableBoxes.forEach(function(box) {
        var header = box.querySelector('.custom-template-expandable-box-header');
        var contents = box.querySelector('.custom-template-expandable-box-contents');
        var toggleLabel = box.querySelector('.custom-template-expandable-box-toggle-label');

        // contents と toggleLabel が存在するか確認
        if (!contents || !toggleLabel) {
            return; // 必要な要素がなければスキップ
        }

        // `opened` パラメータの状態を読み取る
        var isOpenedInitially = box.getAttribute('data-opened') === 'True';

        // 初期状態の設定
        if (isOpenedInitially) {
            contents.style.display = 'block';
            toggleLabel.textContent = '[非表示]';
        } else {
            contents.style.display = 'none';
            toggleLabel.textContent = '[表示]';
        }

        // ヘッダーがクリックされたときのイベントリスナーを設定
        if (header) {
            header.addEventListener('click', function() {
                if (contents.style.display === 'none') {
                    // 非表示なら表示にする
                    contents.style.display = 'block'; // または 'initial'
                    toggleLabel.textContent = '[非表示]';
                } else {
                    // 表示なら非表示にする
                    contents.style.display = 'none';
                    toggleLabel.textContent = '[表示]';
                }
            });
        }
    });
}

expandableBoxFunc();