> For the complete documentation index, see [llms.txt](https://docs.tenten.co/docs-webflow/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.tenten.co/docs-webflow/webflow-101/7-dong-hua/dian-ji-shi-xian-shi-he-yin-cang-yuan-su.md).

# 點擊時顯示和隱藏元素

本文會提到：

1. 創建動畫使一個元素出現
2. 創建動畫使一個元素消失
3. 添加第二個觸發元素來顯示，並將兩者設置為在點擊時顯示/隱藏

## 創建動畫使一個元素出現

1. 選擇想作為觸發器的元素
2. 在互動面板中，從選定元素選單中選擇鼠標點擊（輕擊）
3. 從"On 1st Click"中選擇"Start an Animation"
4. 點擊"Timed Actions"旁邊的加號
5. 將動畫命名為"Show"
6. 選擇想出現的元素（與觸發器不同）
7. 點擊定時動作旁邊的加號，選擇隱藏/顯示
8. 點擊眼睛圖標，將顯示設置為無
9. 點擊"Set as initial state"旁邊的方框
10. 當仍在互動面板顯示時，點擊加號，在定時動作下添加第二個隱藏/顯示動作
11. 在"Hide/Show"使顯示設定為原來的值

## 創建動畫使一個元素消失

1. 選擇元素，即上一步中的觸發元素
2. 在第二次點擊時選擇開始動畫
3. 點擊定時動作旁邊的加號
4. 將動畫命名為"Hide"
5. 選擇上一步中您想消失的元素
6. 點擊定時動作旁邊的加號，選擇隱藏/顯示
7. 點擊眼睛圖標，將顯示設定為無

## 添加第二個觸發元素，並將兩者設置為在點擊時顯示/隱藏

1. 點擊並複製原來的觸發元素（"顯示歌詞"）
2. 重新命名它（例如"隱藏歌詞"）
3. 創建一個動作並將其初始狀態顯示為無
4. 添加第二個動作，並使顯示設置為原始值
5. 點擊"顯示歌詞"並確保其顯示設置為無，以便在點擊時隱藏它
6. 點擊"隱藏歌詞"並添加一個動畫，將顯示設置設為無
7. 回到"顯示歌詞"，添加一個動畫，使其在第二次點擊時再次可見
8. 點擊並拖動，使定時動作中的所有內容在同一時間發生（0秒）


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.tenten.co/docs-webflow/webflow-101/7-dong-hua/dian-ji-shi-xian-shi-he-yin-cang-yuan-su.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.