すべてのペインの縮小

クイックスタートの例を基に、アコーディオンで開いているペインをすべて縮小する関数を作成できます。

注意：関数を作成するほかに、requireOpenedPane オプションを変更する必要もあります。このオプションは、すべてのペインの縮小を禁止するようにデフォルトで true に設定されているためです。

HTML ファイルの <head> セクションで、ドキュメントの ready 関数を含むスクリプトを、以下を実行するスクリプトに置き換えます。

すべてのペインを閉じることができるように、requireOpenedPane オプションを false に設定します。
id が "collapseAll" に設定されたボタンのクリックイベントから collapseAll 関数を呼び出します。
アクティブな（拡張された）状態のすべてのヘッダーでactivate メソッドを呼び出す collapseAll 関数を作成します。

折りたたみのスクリプト	コードのコピー
<script type="text/javascript"> $(document).ready(function () { $("#accordion").wijaccordion({ header: "h2", expandDirection: "right", requireOpenedPane: false }); $("#collapseAll").click(function(){collapseAll();}); }); function collapseAll(){ var accordion = $("#accordion"); accordion.wijaccordion("activate", accordion.find(".wijmo-wijaccordion-header.ui-state-active")); } </script>

折りたたみのスクリプト

コードのコピー

<script type="text/javascript">
    $(document).ready(function () {
        $("#accordion").wijaccordion({
        header: "h2", 
        expandDirection: "right",
        requireOpenedPane: false
        });
        $("#collapseAll").click(function(){collapseAll();});
    });
        function collapseAll(){
            var accordion = $("#accordion");
            accordion.wijaccordion("activate",                 accordion.find(".wijmo-wijaccordion-header.ui-state-active"));
        }
</script>

HTML ファイルの <body> セクションで、Accordion の最後の </div> タグの後に次のマークアップを追加して、id が "collapseAll" に設定されたボタンを作成します。
ボタンのマークアップ
コードのコピー
<button id = "collapseAll">Collapse All</button>
HTML ファイルを保存し、それをブラウザで開きます。ボタンがアコーディオンの下に表示され、このボタンをクリックするとすべてのペインが閉じます。

関連トピック

参照