How to use buttons to toggle image visibility?

user_14241407 0
Viewed 951

I am trying to have a button make an image appear when you press them, then hide them when you press the same button. (3 different images and 3 different buttons in my code). In the code I make the images appear, but I don't know how to make the same buttons hide the images.

function image1() {
  document.getElementById("image1").src = "image1.jpg";
}

function image2() {
  document.getElementById("image2").src = "image2.jpg";
}

function image3() {
  document.getElementById("image3").src = "image3.jpg";
}
<button onclick="image1()">image1</button>
<img src="" id="image1">

<button onclick="image2()">image2</button>
<img src="" id="image2">

<button onclick="image3()">image3</button>
<img src="" id="image3">

button function image html javascript
8 Answers

I recommend you wrap the button and image inside sub-containers. When you click the button, get the parent element (wrapper) and toggle a class on it.

<div class="toggle-image">
  <button onclick="toggle(this)">Image 1</button>
  <img src="http://placekitten.com/100/100" />
</div>

A CSS selector will take care of hiding the image.

.toggle-image.hidden img {
  display: none;
}

Full Example

function toggle(button) {
  button.parentElement.classList.toggle('hidden');
}
body {
  background: #111;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.toggle-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.toggle-image img {
  width: 100px;
  height: 100px;
  margin-top: 1em;
   box-shadow: 0.25em 0.25em #EEE;
}

.toggle-image.hidden img {
  display: none;
}
<div class="toggle-image">
  <button onclick="toggle(this)">Image 1</button>
  <img src="http://placekitten.com/100/100" />
</div>
<div class="toggle-image">
  <button onclick="toggle(this)">Image 2</button>
  <img src="http://placekitten.com/300/300" />
</div>
<div class="toggle-image">
  <button onclick="toggle(this)">Image 3</button>
  <img src="http://placekitten.com/500/500" />
</div>

user_17622240 
<button onclick="toggle('image1')">image1</button>
<img src="image1.jpg" id="image1">

<button onclick="toggle('image2')">image2</button>
<img src="image2.jpg" id="image2">


function toggle(targetID) {
  var imgElement = document.getElementById(targetID);
  if(imgElement.style.display == "block"){
     imgElement.style.display = "none";
  }else{
     imgElement.style.display = "block";
  }
}

Maybe like this ?

user_61982070 

const images = [
  'image.jpg',
  'image2.jpg',
  'image3.jpg'
];

const imagesBox = document.getElementById('images-box');

function image(index) {
  imagesBox.innerHTML = '';
  imagesBox.insertAdjacentHTML('beforeend' ,`<img src="${images[index]}"/>`);
}
button {
  padding: 8px 12px;
  border: 0;
  border-radius: 3px;
  background-color: #475863;
  color: white;
  margin: 5px;
}
#images-box {
  margin-top: 25px;
  padding: 25px;
  background-color: white;
  border: 1px solid #d1d1d1;
  border-radius: 3px;
}
<button onclick="image(1)">Button 1</button>
<button onclick="image(2)">Button 2</button>
<button onclick="image(3)">Button 3</button>
<div id="images-box"></div>

user_74943430

use jQuery. there is a method call toggle. it will help a lot.

$('#image').toggle()
user_142283320

You can do something below.

function image1() {
  
  document.getElementById("image1").classList.toggle("hideME");

}

function image2() {
   document.getElementById("image2").classList.toggle("hideME");
}

function image3() {
   document.getElementById("image3").classList.toggle("hideME");
}
.hideME {
  display : none;
}
<button onclick="image1()">image1</button>
<img src="image1.jpg" id="image1" class="hideME">

<button onclick="image2()">image2</button>
<img src="image2.jpg" id="image2" class="hideME">

<button onclick="image3()">image3</button>
<img src="image3.jpg" id="image3" class="hideME">

user_63094570

Here is an example using data- attributes to bind a button to a specific image id with pure JS and using jQuery.

data- attributes can contain any value you like. Using them doesn't limit you to the placement of the elements in DOM-tree. Buttons and images can be wherever you like in the code, and they can still find each other. Unlike using the method that relies on having the same parent. However, I do agree that it is more readable that way, so it is up to you to decide what is more suitable for your situation :)

/* Pure Javascript*/
// Get the buttons that have the data-image-id attribute
var buttons = document.querySelectorAll('button[data-image-id]');

// Go over each button to attach a click event
buttons.forEach(function(item, index) {

  item.addEventListener('click', function(event) {
    // Get the value of the data-image-id attribute
    var image_id = event.target.getAttribute('data-image-id');
    
    // Find the image with specific id and toggle the .active class on it
    document.getElementById(image_id).classList.toggle('active');
  });
  
});

/* Using jQuery */
/*
$('button[data-image-id]').click(function(event) {
  var $this = $(event.target);
  var image_id = $this.attr('data-image-id');
  $('#' + image_id).toggleClass('active');
});
*/
/* Hide images that do not have the .active class */
img:not(.active) {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!--
  The value of the data-image-id attribute
  is the same as the id of an image
-->
<button data-image-id="image1">image1</button>
<img src="https://picsum.photos/100/50" id="image1">

<button data-image-id="image2">image2</button>
<img src="https://picsum.photos/101/50" id="image2">

<button data-image-id="image3">image3</button>
<img src="https://picsum.photos/102/50" id="image3">

user_123205780

One way is to invert element hidden property, like :

<span>
<button onclick="document.getElementById('pic1').hidden^=1" style="top: 25px; left:70px; position:absolute;" type="button">Show or Hide</button>
<img hidden id="pic1" width="50px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8Jyn5HwAFPgIhVXO6lgAAAABJRU5ErkJggg==">
</span>

user_3803310

You shouldn't change the src in order to hide/show the images, that's a logical change, while you want UI/design changes based on a certain logic.

function hideShow(id) {
    var element = document.getElementById(id);
    element.style.display = (element.style.display === "none") ? "block" : "none";
}
<button onclick="hideShow('image1')">image1</button>
<img src="https://pbs.twimg.com/profile_images/821849411991044096/lQFa_Vly_400x400.jpg" id="image1" style="display: none;">

<button onclick="hideShow('image2')">image2</button>
<img src="https://media.gettyimages.com/photos/who-is-the-boss-picture-id480585465?s=612x612" id="image2" style="display: none;">

<button onclick="hideShow('image3')">image3</button>
<img src="https://hips.hearstapps.com/vader-prod.s3.amazonaws.com/1595961621-il_794xN.2460764659_56ur.jpg?crop=1xw%3A1xh%3Bcenter%2Ctop" id="image3" style="display: none;">

You can see that I have used a single function and changed the display attribute of style instead of src. The function gets an id, loads the element identifiable by that (which is an img) and if it has a display of none, then it's set to block. Otherwise it's set to none.

user_4365600
Related