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
Here we have a simple HTML document with a stylesheet link to the icons I am using on the head.
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'.
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
Along with the Javascript, I am also using some jQuery method.
On the selector I am selecting the span tag class. Then on click it will run a function.
The function is selecting an i tag which is the tag for both the check and un-check icon.
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)