すべてのペインの拡張

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

注意：関数を作成するほかに、requireOpenedPaneオプションを変更する必要もあります。このオプションは、すべてのペインの縮小を禁止するようにデフォルトで true に設定されているためです。このオプションを false に変更したくない場合は、以下のセクションのスクリプトを調整する必要があります。

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

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

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

拡張のスクリプト

コードのコピー

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

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

関連トピック

参照