折りたたみパネルを追加する.

訪問者が1つずつ開く見出しの並びがほしい場合は、コラプスパネル (アコーディオンとも呼びます) を使います。FAQ、機能一覧、分割した方が 読みやすい長いコンテンツに向きます。最後にはクリックで答えが開く質問の 束が残ります。例では代理店FAQページの3つの質問を作ります。

コラプスパネルを追加する

1. セクションの+をクリックし、Layoutタブから Collapse panelを選びます。トグル1つ付きで入ります。
2. パネルの設定はMoreメニューから開きます。 Collapseで全トグルを閉じた状態ではじめるか選びます。ここでは オンです。Expand iconを選んでSaveを クリックします。
3. トグルにホバーしてMoreメニューを開き、 Settingsを選びます。質問をToggle titleに 入力してSaveをクリックします。
4. 質問をクリックしてトグルを開きます。中の+をクリックして Textを選び、答えを入力します。
5. 次の質問にはパネルのコントロールバーのAdd toggleを クリックします。新しいトグルは上に付くので、最後の質問から先に 追加します。
6. ツールバーのSaveをクリックします。プレビューで質問を クリックし、答えが開くことを確認します。

表示結果

各質問は選んだ展開アイコン付きの見出しです。クリックで下に答えが開き、 開いていた答えは閉じます。Collapseがオフの場合、最初の答えは ページ読み込み時に開いています。答えは閉じていてもページHTMLに残るので、 検索エンジンが読めます。

コラプスパネルの設定

対象のCollapse panelエレメントには2つの設定があり、コントロールバーの More > Settingsにあります。

各トグルには1つの設定Toggle titleがあります。訪問者が クリックする質問や見出しです。

トグルの管理

• Reorder: コントロールバーのToggleをつかんで トグルをドラッグし、他の上下に落とします。
• Rename: トグルにホバーしてMore > Settingsを開き、Toggle titleを変えて Saveをクリックします。
• Remove: トグルにホバーしてMoreを開き、 Deleteを選びます。中の答えも一緒に消えます。

トグルには任意のエレメントが入ります。テキスト、画像、ボタン、カラム付きロー などです。答えは短く保ちます。答えに独自のページが必要なら、代わりにその ページへリンクします。

表示されない場合

• 新しい質問が一番上に現れます。 Add toggleは常にパネルの上に挿入します。コントロールバーの Toggleをつかんでトグルを希望の場所へドラッグします。
• 設定にToggle titleしか出ません。 1つのトグルの設定を 開いています。パネルの上端にホバーしてCollapse panel コントロールバーを出し、そこでMore > Settingsを開きます。
• ページ読み込み時に最初の答えが開いています。 Collapseがオフです。Collapse panel設定で オンにして全答えを閉じた状態ではじめます。
• Collapse panelがピッカーのLayoutタブにありません。 DXPR Builderユーザープロファイルに含まれていません。管理者がAccordionを プロファイルのElements下でチェックします (/admin/dxpr_studio/dxpr_builder/profile)。

次はこちら

• タブパネルを追加する: 積み重ねる代わりに関連コンテンツを横に並べて見せます。
• FAQページチュートリアル: コラプスパネルを中心にFAQページ全体を作ります。
• ネスト: トグルの中にローとカラムを入れます。