javascript - Switching classes from display:none to visible on click -

I am reading lots of previous posts but I do not understand how to do this for my special issue .

I have an image on the left side of my site that has two options, cow and pig. The way I plan to use this part of this page is as a slider. I would like a user to click on this image and roam multiple times in the form of "Cig" and "Pig" and "Pig" as "Cow" several times.

This selection decides what the background is, the image is used in the other side on the right side of the page. So when I click on the image on the left, I would like to change the display properties to alternate to appear as a cow (and toggle the display: any property from pig to cow).

Any help would be commendable. I have seen but it does not help me completely

Try adding a click event to each image that hides the image shown Shows more Try it:

  $ (document) .ready (function () {var $ slider1 = $ ('homesplashslider'); var $ slider2 = $ ('homesplashslider2'); $ ('. Cowtoggle ') (function () {$ slider1.show (); $ slider2.hide ();}); $ (' .pigtoggle ') Click (function () {$ slider2.show (); $ Slider1.hide ();});});