Title: Block interaction
Last modified: May 25, 2023

---

# Block interaction

 *  [marcosgeria](https://wordpress.org/support/users/marcosgeria/)
 * (@marcosgeria)
 * [3 years ago](https://wordpress.org/support/topic/block-interaction/)
 * I need to show different images when different buttons are pressed. When you 
   click on the button, the images below change.
 * button 1 button 2 button … button 36
 * [and here will be displayed a group of images that change when different buttons
   are pressed]
 * I would like to know if its possible without complex code.
 * Thank you
    -  This topic was modified 3 years ago by [marcosgeria](https://wordpress.org/support/users/marcosgeria/).
    -  This topic was modified 3 years ago by [marcosgeria](https://wordpress.org/support/users/marcosgeria/).
    -  This topic was modified 3 years ago by [marcosgeria](https://wordpress.org/support/users/marcosgeria/).
    -  This topic was modified 3 years ago by [marcosgeria](https://wordpress.org/support/users/marcosgeria/).
    -  This topic was modified 3 years ago by [marcosgeria](https://wordpress.org/support/users/marcosgeria/).

Viewing 1 replies (of 1 total)

 *  [Jesús Amieiro](https://wordpress.org/support/users/amieiro/)
 * (@amieiro)
 * [3 years ago](https://wordpress.org/support/topic/block-interaction/#post-16767568)
 * Hi [@marcosgeria](https://wordpress.org/support/users/marcosgeria/)
 * This problem is not related with WordPress. It is a regular problem for the frontend.
 * You need to use JavaScript. When a button is [clicked](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event),
   you need to hide all the images and show only the images you want to display.
   Adapt the next code to your problem.
 *     ```wp-block-code
       <!DOCTYPE html>
       <html>
       <script>
           function showImage( image ) {
               document.getElementById( 'image-1' ).style.display = "none";
               document.getElementById( 'image-2' ).style.display = "none";
               document.getElementById( image ).style.display = "inherit";
           }
       </script>
       <body>
           <a href="#" id="button-1" onClick="showImage('image-1')">Button 1</a>
           <a href="#" id="button-2" onClick="showImage('image-2')">Button 2</a>
           <img src="./image1.jpg" id="image-1" style="display:none">
           <img src="./image2.jpg" id="image-2" style="display:none">
       </body>
       </html>
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Block interaction’ is closed to new replies.

## Tags

 * [hide](https://wordpress.org/support/topic-tag/hide/)
 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [show](https://wordpress.org/support/topic-tag/show/)

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 1 reply
 * 2 participants
 * Last reply from: [Jesús Amieiro](https://wordpress.org/support/users/amieiro/)
 * Last activity: [3 years ago](https://wordpress.org/support/topic/block-interaction/#post-16767568)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
