Changing images on Button press

Question

I have this bit of code that changes multiple images on my website. Right now I can change the images once but I can not change them back to the original images. I was trying to use.toggle after my.css to change the images back and fourth but that did not work. How would I go about solving this?

  $("button").click(function(){
      $("#secriuty").css({"background-image": "url('images/certificates/secriuty-fundamentals-certificate.png')"}), 
      $("#js").css({"background-image": "url('images/certificates/js-certificate.png')"}),
      $("#html5").css({"background-image": "url('images/certificates/html5-certificate.png')"}),
      $("#html-css").css({"background-image": "url('images/certificates/html-and-css-certificate.png')"}),
      $("#photoshop").css({"background-image": "url('images/certificates/photoshop-certificate.png')"}),
      $("#illustrator").css({"background-image": "url('images/certificates/illustrator-certificate.png')"})
    });

Answer 1

Try this:

 $('.checkbox').click(function() { const button = $(this).parent('#button'); if( $(button).find('.checkbox').is(':checked') ) { $("#aaa").css({"background-image": "url('https://picsum.photos/id/141/150/150')"}) $("#bbb").css({"background-image": "url('https://picsum.photos/id/222/150/150')"}) $("#ccc").css({"background-image": "url('https://picsum.photos/id/27/150/150')"}) } else { $(".div").css({"background-image": ""}) } })

 .gallery { display: flex; flex-direction: row; } #aaa { display: block; width: 150px; height: 150px; background-image: url('https://picsum.photos/id/121/150/150'); } #bbb { display: block; width: 150px; height: 150px; background-image: url('https://picsum.photos/id/121/150/150'); } #ccc { display: block; width: 150px; height: 150px; background-image: url('https://picsum.photos/id/121/150/150'); }.div { margin-right: 5px; }.div:last-of-type { margin-right: 0; } /* Button */.btn { width: 150px; height: 40px; margin-top: 10px; background-color: #999; display: flex; align-items: center; justify-content: center; }.btn:hover { background: #444; color: #fff; }.btn.checkbox { position: absolute; left: 0; right: 0; width: 150px; height: 40px; opacity: 0; z-index: 999; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="gallery"> <div id="aaa" class="div"></div> <div id="bbb" class="div"></div> <div id="ccc" class="div"></div> </div> <div id="button" class="btn"> <input type="checkbox" class="checkbox" /> <span>Change Background</span> </div>

Answer 2

Using .toggleClass :

 $("button").click(function(){ $("#security").toggleClass("newpic"); });

 #security { height: 100px; width: 100px; background: red; } #security.newpic { background: url("http://www.fillmurray.com/300/253"); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="security"></div> <button>Click me</button>