Javascript - Show/hide multiple images individually

Problem:

I’m trying to make a toggle where you can show and hide images. I found an answer from a few years ago that only works with one image. When I add another button and image, all buttons only control the first image. How do I make it so that I can show/hide them all individually?

Contents

Problem:Solution:

Pretty much all other questions ask about several sections showing at once at toggle, but I need them to have individual buttons.

I tried to use image classes but that only broke it completely. The images stopped being hidden when I did that.

Here’s a codepen of what I have:
https://codepen.io/thepasteldyke/pen/vYvwwGo

This is the question where I got the code:
Making a button that shows a hidden image on click
The answer in specific is the one by user Lucas.

function toggleImage(){
  document.querySelector('#image').classList.toggle('hidden');
}

.hidden{
  display: none;
}

.w-100{
  width: 100%;
}

.mb-10{
  margin-bottom: 10px;
}

<button onClick="toggleImage()" class="w-100 mb-10">Show/Hide</button>

<img src="https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" id="image" class="hidden w-100"/>

<button onClick="toggleImage()" class="w-100 mb-10">Show/Hide</button>

<img src="https://images.unsplash.com/photo-1520052205864-92d242b3a76b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGlua3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" id="image" class="hidden w-100"/>

Solution:

The issue you are encountering stems from using the same ID for multiple elements. In HTML, IDs should be unique, meaning each ID can only be assigned to one element. When you use document.querySelector(‘#image’), it only selects the first element with that specific ID, which is why only the first image is affected.

<!DOCTYPE html>
<html>
<head>
<style>

    .hidden{
      display: none;  
    }

    .w-100{
      width: 100%;
    }

    .mb-10{
      margin-bottom: 10px;
    }


</style>


<script>

    function toggleImage(imageId){
      document.querySelector('#'+imageId).classList.toggle('hidden');
    }

</script>

</head>
<body>

    <button onClick="toggleImage('image1')" class="w-100 mb-10">Show/Hide</button>

    <img src="https://images.unsplash.com/photo-1567653418876-5bb0e566e1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1964&q=80" id="image1" class="hidden w-100"/>

    <button onClick="toggleImage('image2')" class="w-100 mb-10">Show/Hide</button>

    <img src="https://images.unsplash.com/photo-1520052205864-92d242b3a76b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8cGlua3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60" id="image2" class="hidden w-100"/>

</body>
</html>