Enhancing user interaction on your website can significantly improve their overall experience. One way to achieve this is by implementing features that allow users to control what they see, such as toggling the visibility of images. This tutorial will guide you through the process of adding a button to your web page that hides or shows an image when clicked, using nothing but vanilla JavaScript.

Setting Up the Stage

Begin with a basic HTML structure. You’ll need a div with a class of main where our button and image will live. While we’re focusing on the JavaScript, feel free to style your main div to fit your site’s design.

<div class="main"></div>

Crafting the JavaScript

The magic happens in the JavaScript. We’ll dynamically create a button and an image, then add functionality to toggle the image’s visibility upon clicking the button. Here’s how:

const main = document.querySelector('.main');

const btn = document.createElement('button');
btn.textContent = 'Click to toggle';
main.append(btn);

const img = document.createElement('img');
img.src = '/Images/image1.png';
img.style.display = 'none'; // Image is hidden initially
main.append(img);

btn.addEventListener('click', () => {
    console.log('clicked');
    img.style.display = img.style.display === 'none' ? 'block' : 'none';
});

Breaking It Down

1. Button and Image Creation: We start by selecting our main div, then create and append a button labeled “Click to toggle.” Next, we create an image element, set its source, and initially hide it by setting its display style to none.
2. Adding Interactivity: We attach an event listener to the button. When clicked, it toggles the display property of the image between none (hidden) and block (visible).

Why This Matters

This simple feature can be incredibly useful in various contexts, such as hiding high-resolution images to improve page load times, showing detailed product images on e-commerce sites, or creating interactive galleries.

Conclusion

With just a few lines of code, you’ve added an interactive element to your website that can enhance user engagement and improve the visual layout of your content. Experiment with different triggers and applications to see what best suits your project. Happy coding!

JavaScript Tutorial: Toggle Image Visibility with a Click

Description:

Learn how to add interactivity to your web pages by allowing users to toggle the visibility of images. This beginner-friendly tutorial walks you through the steps to create a button that shows or hides an image on your site with a simple click. Perfect for improving user experience and engagement, this technique is a must-know for aspiring web developers. Don’t forget to hit the like button, share, and subscribe for more awesome web development content!

Tags: JavaScript tutorial, toggle visibility, web development, beginner JavaScript, image display, user interaction, coding tutorial, DOM manipulation, web design, interactive web page

Toggle Image Display

Objective: Implement a feature to toggle the visibility of an image when a button is clicked.

const main = document.querySelector(‘.main’);

//main.style.backgroundColor = ‘red’;

//main.style.width = ‘100%’;

//main.style.height = ‘200px’;

const btn = document.createElement(‘button’);

btn.textContent = ‘Click to toggle’;

main.append(btn);

const img = document.createElement(‘img’);

img.src = ‘/Images/image1.png’;

img.style.display = ‘none’;

main.append(img);

btn.addEventListener(‘click’,()=>{

    console.log(‘clicked’);

    img.style.display= img.style.display === ‘none’

    ? ‘block’ : ‘none’;

})