クリックで表示・非表示

要素が表示されるアニメーションの作成

1. トリガーとして機能させたい要素を選択します（例：「表示」ボタン）
2. インタラクションパネルで、On Selected ElementメニューからMouse Click（Tap）を選択します
3. On 1st ClickからStart an Animationを選択します
4. Timed Actionsの横にあるプラスのアイコンをクリックします
5. アニメーションの名前を「表示」とします
6. 表示されることを望む要素を選択します（これはトリガーとは異なる要素である必要があります）
7. Timed Actionsの横にあるプラスのアイコンをクリックし、Hide/Showを選択します
8. Displayをnoneに設定するために目のアイコンをクリックします
9. Set as initial stateの横にあるボックスをクリックします
10. まだインタラクションパネル内で、Timed Actionsの下に2番目のHide/Showアクションを追加するためにプラスのアイコンをクリックします
11. Hide/Showの下で、元の値が何であったかを設定します（例：Blockの場合）

要素を非表示にするアニメーションの作成

1. 前のステップと同じトリガー要素を選択します
2. On 2nd ClickからStart an Animationを選択します
3. Timed Actionsの横にあるプラスのアイコンをクリックします
4. アニメーションの名前を「Hide」とします
5. 前のステップと同じ要素を選択します（非表示にしたい要素）
6. Timed Actionsの横にあるプラスのアイコンをクリックし、Hide/Showを選択します
7. Displayをnoneに設定するために目のアイコンをクリックします

2つ目のトリガー要素を追加し、両方をクリックで表示/非表示できるように設定する

1. オリジナルのトリガー要素（“how Lyrics” text)）をクリックして複製します。
2. 複製した要素の名前を変更します（例：Hide Lyrics）。
3. アクションを作成し、initial stateの表示を非表示（none）に設定します。
4. 2つ目のアクションを追加し、表示設定を元の値に設定します（例：ブロック）。
5. 「Show Lyrics」をクリックし、クリックで非表示にするために表示設定をnoneに設定します。
6. 「Hide Lyrics」をクリックし、表示設定をnoneにするアニメーションを追加します。
7. 「Show Lyrics」に戻り、2回目のクリックで再び表示されるようにするためのアニメーションを追加します。
8. タイムドアクション内のすべての要素が同時に実行されるように、0秒に設定してドラッグして調整します。