Show and hide elements on click

In this lesson:

1. Create an animation to make an element appear
2. Create an animation to make an element disappear
3. Add a second trigger element to show and configure both to show/hide on click

Create an animation to make an element appear

1. Select the element you’d like to act as the trigger (e.g., "Show" button)
2. In the Interactions panel, choose Mouse Click (Tap) from the On Selected Element menu
3. From On 1st Click select Start an Animation
4. Click the plus sign next to Timed Actions
5. Name the animation “Show”
6. Select the element you’d like to appear (this should be different from the trigger)
7. Click the plus sign next to Timed Actions and choose Hide/Show
8. Click the eye icon to set the Display to none 
9. Click the box next to Set as initial state
10. While still in the Interactions panel display, click the plus sign to add a second Hide/Show action under Timed Actions
11. Under Hide/Show, make the display setting whatever the original value was (Block, in our case)

Create an animation to make an element disappear

1. Select the element the same trigger element from the previous step 
2. From On 2nd Click select Start an Animation
3. Click the plus sign next to Timed Actions
4. Name the animation “Hide”
5. Select the same element from the previous step you’d like to disappear 
6. Click the plus sign next to Timed Actions and choose Hide/Show
7. Click the eye icon to set the Display to none 

Add a second trigger element and configure both to show/hide on click

1. Click and duplicate original trigger element (“Show Lyrics” text)
2. Rename it (e.g., “Hide Lyrics”)
3. Create an action and set its initial state display to none 
4. Add a second action and make the display setting the original value (e.g., Block)
5. Click “Show Lyrics” and make sure its display setting is set to none to hide it on click
6. Click “Hide Lyrics” and add an animation that sets the display setting to none
7. Return to “Show Lyrics,” add an animation to make it visible again on 2nd click
8. Click and drag to make everything in timed actions is happening at the same time (0 seconds)

‍

‍

Want to create an accordion to progressively display content, for example, for FAQs? Check out building a custom accordion.