Toggleボックスは、ボタン（赤枠線）とコンテンツ（赤点線）の2つのパーツで構成されており、閲覧者がボタンパーツをクリックするかカーソルを載せると、コンテンツパーツが開閉します。

このToggleボックスを使って、アコーディオンやプルダウンメニューが作成できます。

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

配置したボックスをダブルクリックすると、ボタンとコンテンツパーツの編集モードに切り替わります。

また、Toggleボックスを選択した状態でエディタの右側にある「設定パネル」を開くと、Toggleボックスの詳細設定が行えます。

コンテンツパーツを初期状態で開いて表示するか、閉じるかを設定できます。有効の場合は、開いた状態が初期状態になります。

開閉のトリガーとなる操作を「クリック（click）」または「ホバー（hover）」から選択できます。

開閉操作が「クリック」の場合に利用可能な設定です。この設定を有効にすると、ボタンパーツ以外をクリックした際にも、コンテンツパーツが閉じます。

スタイル編集は、Toggleボックスをダブルクリックし、編集モードに切り替えて行うか、レイヤーパネルから要素を選択して行います。

Toggleボックスでは、通常のスタイル編集に加えて、条件付きスタイル「クローズ」の設定が可能です。

「クローズ」では、コンテンツパーツが閉じている状態のスタイルを設定します。通常時と「クローズ」時のスタイルの違いを設定することで、開閉時のアニメーションが作成できます。

例えば、開閉の速度を調整したい場合は、モーションタブ内の時間やイージングを編集することで調整いただけます。

なお、Toggleボックスの開閉方向は、親ボックスの配置に依存します。親ボックスの配置が、上寄せになっている場合は下方向に、中央寄せになっている場合は上下方向に開閉します。

次の条件付きスタイル「クローズ」が初期状態で設定されています。そのままご利用いただいたり、編集いただくこともできます。

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

プルダウン