JSFiddle - React, Tailwind, and code Playground

by Arshdeep Singh

HTML

<script
			  src="https://code.jquery.com/jquery-3.1.1.min.js"
			  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
			  crossorigin="anonymous"></script>
<div>

<button class="Changeimagetolarge">
Change Image
</button>
<img src="http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png">

</div>

JavaScript

$(document).ready(function(){
var big_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_large.png";

var small_image = "http://cdn4.sportngin.com/attachments/news_article/7560/0742/Screen_Shot_2017-01-04_at_11.30.31_AM_thumb.png";


	$(document).on("click",".Changeimagetolarge",function(){
  var obj = $(this);
  	obj.removeClass('Changeimagetolarge');
    obj.addClass('Changeimagetosmall');
  	obj.next("img").attr('src',big_image);
  });
  
  
  $(document).on("click",".Changeimagetosmall",function(){
    var obj2 = $(this);
  	obj2.removeClass('Changeimagetosmall');
    obj2.addClass('Changeimagetolarge');
  	obj2.next("img").attr('src',small_image);
  });
  
  
  
  
  
});