トグルボックス（Toggle）

トグルボックスは、コンテンツパーツを開閉させるパーツです。トグルボックスを使うと、アコーディオンやプルダウンメニューを作成できます。
​

トグルボックス（黄色の点線部分）に、ボタン部分（上の赤枠）とコンテンツ（下の赤枠）の2つのパーツを含む形で構成されています。

デザインエディタ左側の追加パネル内、ボックスメニューからToggleボックスをクリックまたは、ドラッグ＆ドロップでページに配置します。

トグルボックスの設定では、開閉操作（クリック/ホバー）や、デフォルトの状態（開/閉）などを指定できます。

トグルの開閉トリガーを、以下の２つから選択します。

コンテンツパーツを、初期状態で開いて表示するか、閉じておくかを設定します。 [デフォルトで表示]にチェックを入れると、開いた状態が初期状態になります。

開閉操作が[クリック]の場合に利用可能な設定です。チェックを入れると、ボタンパーツ以外をクリックした際にもコンテンツパーツを閉じることができます。

トグルボックスをダブルクリックすると、トグルに内包されるパーツが表示されます。

編集したい要素を選択し、右パネルの[テキスト]タブや[ボックス]タブから、テキストや色などのスタイルを設定できます。右パネルが閉じている場合は開いてください。

トグルボックスに含まれるボックスは、初期状態で条件付きスタイル「クローズ」の設定がされているものがあります。

条件付きスタイル「クローズ」では、コンテンツパーツが閉じている状態のスタイルを設定します。通常時と[クローズ]時のスタイルの差分によって、開閉時のアニメーションを作成できます。

トグルボックス[Toggle<div>]をダブルクリック、または選択後にエンターキーを押します。トグルの中身が開かれて表示された状態になれば、トグルにアニメーションを設定できます。

公開中のサイトを編集した場合は、サイトを更新してください。更新するまでサイトには反映されません。

条件付きスタイル「クローズ」とアニメーションについて詳しくは、次のヘルプ記事をご覧ください。

プルダウン トグルボタン