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 1 year, 5 months ago by marcosgeria.
    • This topic was modified 1 year, 5 months ago by marcosgeria.
    • This topic was modified 1 year, 5 months ago by marcosgeria.
    • This topic was modified 1 year, 5 months ago by marcosgeria.
    • This topic was modified 1 year, 5 months ago by marcosgeria.
Viewing 1 replies (of 1 total)

  • Hi @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, you need to hide all the images and show only the images you want to display. Adapt the next code to your problem.

    <!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.