DEV Community

Tri Nguyen
Tri Nguyen

Posted on

How to Toggle between Images on Click

What is up fellow coder.
Thank you for checking out my article on learning how to toggle between images on click.

Lets get right into it!

HTML

Alt text of image

  1. Here we have a simple HTML document with a stylesheet link to the icons I am using on the head.

  2. In the body I have the 2 icon/images I want to toggle. In this case it is a check box and a uncheck box. Both of the icons are wrapped inside a span tag class name = 'tog'.

  3. And if you look closely in line 8. I made sure the checked box style is hidden using display:none.

Now lets look inside the Javascript

Alt text of image

Along with the Javascript, I am also using some jQuery method.

  1. On the selector I am selecting the span tag class. Then on click it will run a function.

  2. The function is selecting an i tag which is the tag for both the check and un-check icon.

  3. Lastly, I am using the toggle function to toggle between the two icons.

EZ PZ !

You can test it out here!
https://codepen.io/anon/pen/qMzyyw

Top comments (0)