Show and hide on click

Create a mouse click or tap trigger using one element to show and hide a different element on click.

This video features an old UI. Updated version coming soon!
 
This video features an old UI. Updated version coming soon!

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.

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback