top of page
Hide and Show an Image

Hide and Show an Image

Show and hide an image according to the clicked button.

Intermediate.png

Beginner

9K

Published:

February 23, 2020

Girl Enjoying her Drink

by

​

Anchor 1
Hire a Developer

Example Description

In this example we use two buttons in order to show and hide an image.

Example Code

Tab 1

.

Tab 2

.

Tab 3

.

This code solution can be complicated.

How We Built It

Page Elements


In our site we added the following page elements:

  • An image

  • Two buttons, one with the ID "showButton" and one with the ID “hideButton”.


Code


In the onReady() function we added two event handlers, one for each button.

When clicking the hide button the image is hidden and when clicking the show button the image is shown again.

APIs We Used

$w.Image API

Non-code example.

Related Articles

Article Link

Hire a Developer

Velo solutions are powerful tools, but building them on your own can be challenging. Let an experienced Velo development shop build it for you, so you can keep working on your site or business.

Related Examples

Did this help?

Yes

|

No

Thanks for your feedback!

Hide & Show Elements

Hide & Show Elements

Hide and show elements in response to user interactions.

Intermediate.png

Intermediate

Collapse Elements

Collapse Elements

Collapse and expand groups of elements.

Intermediate.png

Beginner

Image and Text Animation

Image and Text Animation

Use wix-animations API to animate images and text.

Intermediate.png

Intermediate

Anchor 2
bottom of page