DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. ๐Ÿ›