Show and hide elements on click

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

interactions-animations
 
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?