Replace class in order to replace image on click with jquery

Question

I read a number of articles and answers here on Stack Overflow but none of them answered my question as I'm really a noob when it comes to jQuery and I'm not sure how to do this.

I have a HTML landing page on which I'm trying to show several images on which you click and they get replaced with another image and when clicked again or at another image the original one is shown.

I have this so far:

<div class="santa">
  <img class="show" src="images/santa.png" alt="">
  <img class="hide" src="images/bubble.png" alt="">
</div>

.hide { display: none; }
.show { display: block; }

I want to show santa.png by default and when clicked on to change it to bubble.png, meaning default class is show and when clicked on it's hide for santa and vice versa.

Thanks in advance!

Rory McCrossan · Accepted Answer · 2017-12-04 11:50:04Z

5

The simple way to do this is to call toggle() on both the displayed and hidden images when one is clicked. This will invert the display state of both elements simultaneously:

$('.hide, .show').click(function() {
  $(this).closest('div').find('.hide, .show').toggle();
})

.hide { display: none; }
.show { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="santa">
  <img class="show" src="images/santa.png" alt="Santa">
  <img class="hide" src="images/bubble.png" alt="Bubble">
</div>
<div class="santa">
  <img class="show" src="images/santa.png" alt="Santa2">
  <img class="hide" src="images/bubble.png" alt="Bubble2">
</div>

If you actually want to change the class values on the elements, then you can use toggleClass() instead:

$('.hide, .show').click(function() {
  $(this).closest('div').find('.hide, .show').toggleClass('hide show');
})

.hide { display: none; }
.show { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="santa">
  <img class="show" src="images/santa.png" alt="Santa">
  <img class="hide" src="images/bubble.png" alt="Bubble">
</div>
<div class="santa">
  <img class="show" src="images/santa.png" alt="Santa2">
  <img class="hide" src="images/bubble.png" alt="Bubble2">
</div>

edited Dec 4, 2017 at 11:50

answered Dec 4, 2017 at 11:38

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

UncaughtTypeError Over a year ago

I was just about to post an answer suggesting the .toggleClass() method as an alternative, but you have that one covered as well. Anyway, I don't think you can get any more efficient than the first solution.

Damir Over a year ago

@rory-mccrossan This worked for me, the only problem I'm now facing is that I have 5 divs and each has 2 images (hide and show) and once one of the images in one of the 5 is clicked all of the images on the page are being changed. Any idea how to fix this?

Rory McCrossan Over a year ago

In that case you need to get the nearest parent div and find the .hide/.show within that. I updated the answer for you to show you how to do this

Damir Over a year ago

Worked like a charm! Thank you!

Rory McCrossan Over a year ago

No problem, glad to help

Rajkumar Somasundaram · Accepted Answer · 2017-12-04 11:43:41Z

0

Since u are a beginner, my humble request is to learn vanillajs thoroughly before using libraries like jquery.

here is a pure js approach.. Cheers

let santaimg = document.getElementById('santa');
let bubbleimg = document.getElementById('bubble');

santaimg.onclick = showBubbleHideSanta;

function showBubbleHideSanta() { 
 santaimg.classList += " hide";
 //santaimg.classList -= "show";
 bubbleimg.classList -= " hide";
 //bubbleimg.classList += "show";
}

.show {
  display:block;
}
.hide {
  display:none;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Jonathan_G_Meath_portrays_Santa_Claus.jpg/220px-Jonathan_G_Meath_portrays_Santa_Claus.jpg" id="santa" class="show"/>
<img src = "https://sophosnews.files.wordpress.com/2017/05/shutterstock_296886146.jpg?w=780&h=408&crop=1" id="bubble" class="hide"/>

answered Dec 4, 2017 at 11:43

Rajkumar Somasundaram

1,2702 gold badges11 silver badges20 bronze badges

1 Comment

Rory McCrossan Over a year ago

This only appears to work once. It doesn't toggle. I'd suggest using classList.toggle() developer.mozilla.org/en-US/docs/Web/API/Element/classList

Aravind S · Accepted Answer · 2017-12-04 11:47:39Z

0

Try this...if you have two images only...

HTML

<div class="santa">
                <img class="show" src="http://via.placeholder.com/350x150" alt="img">
                <img class="hide" src="http://via.placeholder.com/250x150" alt="img">
 </div>

CSS

.show{
    display:block;
 }
 .hide{
    display:none;
 }
 img{
    max-width:100%;
    height:auto;
    cursor:pointer;
 }

JS

 jQuery('.show, .hide').click(function() {
      jQuery('.show, .hide').toggle();
    });

Thanks !

answered Dec 4, 2017 at 11:47

Aravind S

2,3952 gold badges15 silver badges21 bronze badges

Comments

DavidPi · Accepted Answer · 2017-12-04 11:48:18Z

If you want to show/hide an element I suggest you to use .hide() and .show() It's pure JQuery and no need of CSS.

"The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value" http://api.jquery.com/hide/

Here is an exemple:

HTML

<div>
    <img class="santa_img" src="images/santa.png" alt="santa">
    <img class="bubble_img" src="images/bubble.png" alt="bubble">
</div>

JS (JQuery)

$(".santa_img").click(function(){

    $(".santa_img").hide();
    $(".bubble_img").show();

})

$(".bubble_img").click(function(){

    $(".bubble_img").hide();
    $(".santa_img").show();

})

$(".bubble_img").hide(); //Hidden by default

Collectives™ on Stack Overflow

Replace class in order to replace image on click with jquery

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related