Configuring jQuery's color animation effect

Question

Is there an effective way to use jQuery's standard color animation effect to create a collapsible section that, by default, only displays the h3 tag, but will then expand and collapse the "effect" div using the tool's standard functionality?

Here's the sample code from the jQuery site, which I'd like to use in this example:

+-----------+--------+
| FILE CODE | STATES |
+-----------+--------+
| TEST 1    | CA     |
| TEST 2    | CA     |
| TEST 1    | CA     |
| TEST 2    | CA     |
| TEST 3    | CA     |
| TEST 4    | CA     |
| TEST 5    | CA     |
| TEST 1    | AZ     |
| TEST 1    | LI     |
| TEST 4    | CA     |
| TEST 4    | CA     |
+-----------+--------+

Ideally, I would like to see this effect used such that only the h3 tag with the word "Animate" will display until someone clicks the button to toggle the effect. Thanks for your time and insights!

Regards,

Wyattburp86

Answer 1

在文档准备好的文本元素上添加p_2或随时随地添加.hide();。然后在按钮单击事件中将.show();添加到文本元素。

工作示例： - https://jsfiddle.net/6f2dqd0g/6/

更多信息（W3s）：https://www.w3schools.com/jquery/jquery_hide_show.asp