Question 266306 in Html Question posted in
Some basic documentation can be found here.

Html – Show/hide multiple images individually

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?

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"/>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    You can’t have ids with the same value. For a generic solution you can retrieve all the buttons, apply an onClick listener and get the image right next to the clicked button in the DOM.

    Something like:

    const buttons = document.querySelectorAll("button");

buttons.forEach((button, index) => {
  button.addEventListener("click", function () {
    const image = button.nextElementSibling;
    if (image && image.tagName === "IMG") {
      image.classList.toggle("hidden");
    }
  });
});
    .hidden{
  display: none;
  
}

.w-100{
  
  width: 100%;
}

.mb-10{
  margin-bottom: 10px;
}
    <button 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 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"/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search