How can I toggle between 2 images

Question

Im trying to use this code to toggle between a play and pause button but it doesn\'t seem to be working. How can I get it toggle between the 2 images when the are clicked

Answer 1

Pure HTML/CSS

label.tog > input {
  display: none; /* Hide the checkbox */
}

label.tog > input + span {
  text-indent: -9000px; /* Make text Accessible but not visible */
  display: inline-block;
  width: 24px;
  height: 24px;
  background: center / contain no-repeat url("//i.stack.imgur.com/gmP6V.png"); /*Play*/
}

label.tog > input:checked + span {
  background-image: url("//i.stack.imgur.com/ciXLl.png"); /*Pause*/
}

	  
	  Button Play Pause

---

Toggle inner span's images using jQuery

Useful cause there's no new request to the server to load images:

$(".tog").click(function(){
  $('img',this).toggle();
});

---

Or, let's say we have this HTML and the .tog image selector:

Using Array.prototype.reverse()

var togSrc = [ "play.png", "pause.png" ];

$(".tog").click(function() {
   this.src =  togSrc.reverse()[0];
});

---

Using the current src value and String.prototype.match()

Useful if you don't know the initial state (play? pause?)

var togSrc = [ "play.png", "pause.png" ];

$(".tog").click(function() {
  this.src = togSrc[ this.src.match('play') ? 1 : 0 ];
});

NOTE: for the last two examples you need to pre-load your images, to prevent the time-gap the browsers makes to request and load a new image from the server.