CODEWITHSUNDEEP
javascripthtmlimagefunctionbutton
sonjor
sonjor

Reputation: 29

How to use buttons to toggle image visibility?

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">

Upvotes: 2

Views: 2209

Answers (8)

Vasiliy Artamonov
Vasiliy Artamonov

Reputation: 1057

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">

Upvotes: 0

Lajos Arpad
Lajos Arpad

Reputation: 77045

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.

Upvotes: 0

Agnius Vasiliauskas
Agnius Vasiliauskas

Reputation: 11277

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>

Upvotes: 0

Nienormalny_
Nienormalny_

Reputation: 480

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>

Upvotes: 1

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48733

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>

Upvotes: 2

Devsi Odedra
Devsi Odedra

Reputation: 5322

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">

Upvotes: 0

Ludi
Ludi

Reputation: 463

<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 ?

Upvotes: 2

Roharui
Roharui

Reputation: 100

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

$('#image').toggle()

Upvotes: 0

Related Questions