> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Adding Custom Interactivity with Events

## Article: Adding Custom Interactivity with Events

## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/adding-custom-interactivity-with-events.md

## Article Content:

# Velo Tutorial: Adding Custom Interactivity with Events



In this tutorial, we’ll show you how to set up an image so that it’s hidden when the page loads, only becoming visible when your visitor clicks a button. We’ll start by adding an image and button to a page, then set up the button to run some code when it’s clicked. Then we’ll configure an image so that it doesn’t automatically load with the page. Finally, we’ll add the code that will make the image appear, with an animation, when the button is clicked.  

## 1\. Enable Velo

  - **Wix Editor:** 
    Click **Dev Mode** in your site's top bar and turn on **Enable Developer Mode** in the dropdown.
    
  - **Wix Studio:**
    If necessary, click ![Code icon](https://github.com/wix-incubator/wix-code-docs/assets/50321691/2c41d3df-930f-4e0f-966f-038742adceed) and then **Start Coding**..

## 2\. Set Up an Element to React to a User Action

Your site can react to user actions with [event handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/frontend-code/about-event-handlers-in-wix.md). When you add an event handler to an element, you’re telling your site to watch the element to see if that event occurs. If it does, you’ll want your site to run some code. 

**To set up an image to display when a button is clicked:**

1. Add a **button** and an **image** to your page.
2. Select the **button** and open the **Properties & Events panel** and then add the **onClick** event handler.
3. The function for your event handler is added to your code in the code editor:
    
    ```js
    $w('#button1').onClick((event) => {
    
    })
    ```

## 3\. Add Code to Your Event Handler

Now you’ll need to set up the image so it’s not visible when the page loads. Then add code so that the image appears when the button is clicked.

Interactions are coded using the Velo APIs. For example, to make an image appear, you’ll use the [`.show()`](https://www.wix.com/velo/reference/$w/image/show) function for the image element.

**To set an image to be hidden on load and to show on a button click:**

1. Select the **image** and open the **Properties & Events panel**, then select **Hidden**. 
2. In the code editor, add the `.show()` function to your image element using the **image ID** which can be found in the **Properties & Events panel**.    
    ```js
    $w('#button1').onClick((event) => {
        $w('#image1').show();
    })
    ```

## 4\. Add an Animation

Many functions accept an optional parameter to change how the function works. For example, you can add animations like FadeIn, Drop-In, Fly-In, and Spin-In to the `.show()` function using the `effectName` parameter. ​To add a Slide-In animation when the button is clicked,
use `'slide'` as the `effectName` parameter as follows: 

 ```js
    $w('#button1').onClick((event) => {
        $w('#image1').show('slide');
    })
```

Now when the button is clicked, the `.show()` function runs on your image with the `'slide'` animation.

>**Note:** 
> To make your image appear without an animation, don't add any parameters to your function.

## Next Steps

With Velo, you can do even more:

*   Add more events and event handlers using the [Velo APIs](https://www.wix.com/velo/reference/api-overview).
*   Make sections with alternating layouts using the [Slideshow](http://wix.to/94BuAAs/$w.Slideshow.html) element.
*   Add collapsible sections. 
*   Add interactions on elements as they enter the viewport.
*   Manipulate Text, Image, Gallery, Repeaters, and other elements using code.