Easy-to-Edit GIF Toggle Button!

[zzzzz]

After much help and more headache, I finally ironed out the GIF toggle button I was working on
I know there's a few scripts for this around already, but ngl, I was STRUGGLING to get any of those to work, so I figured another one wouldn't hurt to have floating around.

The button:
- has 2 classes of images coded in; one class toggles between display:none/display:inline-block, the other toggles between blurred/unblurred
- also has 2 classes for the button that change on click, so hide/show can have different looks easily
- switches the text on click in a very simple way, keeping your HTML from getting messy and confusing (im easily confused, can you tell )

Please let me know if you see any improvements to add, otherwise I hope some people find it useful~

You can find it on codepen here!

[cavitycollector]

this is great! i'd say the choice of class names is a bit confusing, "blur" being the end state of y and "flash" being the beginning state of x. i would either name y blur and x hide, or y nonFlashGif and x flashGif. for example, my site uses the class names "importantGif" for gifs that will continue to be displayed but turned safe, and "unimportantGif" for ones that will be hidden!

also its best to have the default state (what itll look like when you load up the page) as the safe version. this is definitely very easy to edit though, so if someone were to use it on their site theyd be able to change all that to their liking without issue; just would probably make it easier to understand! you did awesome, pre-written code that is easy to edit is a godsend always. 

[zzzzz]

Good notes! changing some variable names was quick, though the button text swap acts weird if I try to switch the order  so that will be solved later

I'm planning on also having an alert dialogue with buttons to opt in/out of GIF visibility before the page loads, so that one didn't even occur to me, good looks!