Display and conceal elements upon clicking

Within this tutorial:

1. Construct an animation to exhibit an element
2. Develop an animation to make an element vanish
3. Integrate an additional trigger element to reveal and configure both to display/conceal upon click

Establish an animation to showcase an element

1. Choose the element you wish to serve as the initiator (for instance, “Reveal” button)
2. In the Interactions panel, opt for Mouse Click (Tap) from the On Selected Element dropdown
3. Within On 1st Click, choose Initiate an Animation
4. Tap the addition symbol beside Timed Actions
5. Name the animation as “Reveal”
6. Select the element you desire to be visible (distinct from the initiator)
7. Tap the addition symbol next to Timed Actions and select Conceal/Reveal
8. Tap the eye icon to configure the Display as none
9. Check the box next to Set as initial state
10. While within the Interactions panel display, click the addition symbol to introduce a second Conceal/Reveal action under Timed Actions
11. In the Conceal/Reveal section, reinstate the display setting to its original value (e.g., Block, in our scenario)

Construct an animation to make an element vanish

1. Choose the same initiating element from the prior step
2. Within On 2nd Click, select Initiate an Animation
3. Tap the addition symbol beside Timed Actions
4. Name the animation as “Conceal”
5. Select the identical element from the previous step that you wish to disappear
6. Tap the addition symbol next to Timed Actions and pick Conceal/Reveal
7. Tap the eye icon to configure the Display as none

Integrate another trigger element and configure both to display/conceal upon click

1. Duplicate the original initiating element (“Show Lyrics” text)
2. Change its name (e.g., “Conceal Lyrics”)
3. Establish an action and adjust its initial state display to none
4. Incorporate a second action and set the display to its original value (e.g., Block)
5. Select “Show Lyrics” and ensure its display setting is none to conceal it upon click
6. Click “Conceal Lyrics” and add an animation that sets the display to none
7. Head back to “Show Lyrics,” append an animation to make it visible again upon 2nd click
8. Click and arrange all timed actions to occur simultaneously (0 seconds)

‍

‍

Interested in developing an accordion to gradually reveal content, such as FAQs? Explore the process of creating a custom accordion.